伪元素必须声明content才渲染，否则节点不生成；需设置已定位祖先以控制定位参考系；文字与装饰线层叠需用position+ z-index精确控制。
伪元素必须写content才能显示装饰线
不写content，::before和::after根本不会渲染——不是透明、不是隐藏，是浏览器压根不生成这个节点。哪怕你写了position: absolute、width: 100%、background: #000，全无效。
实操建议：
-
content: ""是最安全的写法，空字符串即可触发渲染 - 想加符号（如「•」或「→」），直接写
content: "•"，别用content: none或漏掉该声明 - 用
attr(data-line)可动态读取 HTML 属性值，适合 CMS 或多语言场景，但注意它仍是纯文本，不解析 HTML
装饰线定位必须有「已定位祖先」
::before或::after设了position: absolute后，它的定位参考系是最近的「已定位祖先」（即position值为relative、absolute、fixed或sticky的父元素）。如果父容器没设，它就往上找，最终可能相对body定位，线条飘到页面角落。
实操建议：
- 给伪元素的直接父元素加
position: relative，哪怕它本身不需要定位 - 若父元素已是
absolute或fixed，则无需额外加relative，但要确认层级是否符合预期 - 别指望
display: inline或float能建立定位上下文——它们不构成「已定位祖先」
文字在线上？得控制z-index和定位方式
想让文字“压”在装饰线上（比如标题中间一条横线，上面居中显示“更多”），不能只靠content塞字——默认它是行内元素，会跟线分离；z-index: -1也不起作用，因为伪元素默认是position: static，z-index被忽略。
实操建议：
- 把伪元素设为
position: absolute，再配z-index参与层叠（例如z-index: -1放在线下，z-index: 1放在线上） - 若文字在真实 DOM 中（比如
标题更多
span设position: relative+z-index: 2更可控 - 避免用
border-bottom直接画线+文字堆叠，容易错位；优先用background+padding-top垫高文字，视觉对齐更稳
响应式装饰线慎用em单位
当用height: 0.1em定义线条粗细时，实际像素值会随父元素font-size缩放。这不是 bug，但常导致线条忽粗忽细，尤其在移动端或配合 rem 布局时。
实操建议：
- 装饰线尺寸优先用
px或rem，避免意外继承 - 需响应式粗细时，用
clamp(1px, 0.05em, 2px)比纯em更可控 - 检查
background: currentColor是否误用了文字色——有时是巧用，有时是事故
最容易出问题的地方永远是三件事：content缺失、定位上下文断裂、把伪元素当普通块级元素套布局直觉。只要盯住这三点，装饰线基本不会“消失”或“乱飘”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
