用::before给标题加横线需标题设position: relative且伪元素设content: ""和position: absolute；否则线条不显示或错位，因::before默认相对于最近已定位祖先定位，未设relative时可能参考body导致失控。
直接用 ::before 给标题加装饰横线，核心就两点：标题必须设 position: relative，伪元素必须设 content: "" 且用 position: absolute 定位。漏掉任一，线条就出不来或乱飘。
为什么标题要加 position: relative
因为 ::before 默认相对于最近的「已定位祖先」找坐标；如果标题没设定位，浏览器会一直往上找——可能落到 body 或某个父容器上，导致线条位置完全失控。加了 position: relative 后，它才真正以标题框为参考系，left/top 才有意义。
常见错误现象：::before 横线出现在页面左上角、或整个标题被顶开、或在其他元素下方错位显示。
- 只对需要装饰的标题加该样式，别全局给
h1~h6都设position: relative，避免影响其他布局逻辑 - 若标题本身已有
position: absolute或fixed，就不需要再加relative，但得确认其父容器是否撑开、是否遮挡伪元素 - 配合
z-index控制层级：如果横线被文字盖住，给::before加z-index: -1（前提是标题本身有z-index值）
::before 横线垂直居中对齐文字的写法
靠 top: 50% + transform: translateY(-50%) 是最稳的方式，它不依赖行高计算，也不受字体度量差异干扰。用 bottom 或 margin-top 等方式容易在字号变化、多行标题或不同字体下偏移。
示例（左侧横线）：
.title {
position: relative;
padding-left: 12px;
}
.title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 2px;
background-color: #007bff;
}
- 宽度
width建议用固定值（如32px）或em单位，避免随容器缩放失衡 - 高度
height设为1px～3px之间较安全；设border-bottom也可，但不如background-color对齐精准 - 若想横线紧贴文字基线（比如放在文字正下方），改用
bottom: 0.2em并配合line-height微调，但兼容性略差
响应式与多级标题适配要点
同一套 ::before 逻辑不能无脑复用于 h1～h3：字号越大，横线长度和 left 偏移量就得相应放大，否则视觉比例失调。
- 用类名统一管理比直接选
h2::before更可控，例如.section-title::before、.card-title::before - 小屏幕下建议用媒体查询缩短横线：
@media (max-width: 768px) { .title::before { width: 24px; } } - 主题色切换时，把颜色抽成 CSS 变量：
background-color: var(--deco-line-color, #007bff);，后续只需改变量值 - 避免在
display: flex或grid容器里直接对标题用::before装饰——flex item 的对齐行为可能干扰absolute定位，优先在外层 wrapper 上操作
最容易被忽略的是：横线在 Retina 屏上可能发虚。解决办法是把 height 设为偶数像素（如 2px），并确保父元素没开启 transform: scale() 类缩放，否则伪元素渲染会模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
