伪元素必须设置content属性（如content: “”）才能渲染，且需在父容器设position: relative以建立定位上下文，伪元素自身设position: absolute并配合z-index控制层叠，尺寸优先用px/rem避免font-size影响。
伪元素的content属性不能为空
不写content，::before和::after根本不会渲染——这是最常被忽略的前提。浏览器会直接忽略该伪元素，哪怕你写了position: absolute、width、background全都没用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
content: ""是最常用写法，空字符串即可触发渲染 - 如果需要文字装饰（比如箭头、图标符号），可用
content: "→"或content: "•" - 避免写
content: none或漏掉该声明——这会导致伪元素“消失”，不是隐藏，是彻底不生成
定位伪元素必须设position: relative在父容器上
伪元素本身设position: absolute后，它的定位参考系是最近的「已定位祖先」。如果父容器没设position（即默认Static），那参考系会一路往上找到body，线条就飘到页面角落去了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给伪元素的直接父元素加
position: relative（哪怕它本身不需要定位） - 不要依赖
display: inline或Float来“凑”定位上下文——它们不构成定位上下文 - 若父元素已是
absolute或fixed，则无需额外加relative，但要确认层级是否符合预期
z-index对伪元素无效，除非它已定位
很多人想把装饰线压在文字下面，写z-index: -1却没反应——因为z-index只对定位元素（position值为relative/absolute/fixed）生效。伪元素默认static，z-index被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 伪元素要参与层叠控制，必须显式设
position: absolute（或relative） - 若想线条在文字下方：父容器设
position: relative，伪元素设position: absolute; z-index: -1 - 注意
z-index只在同一定位上下文中比较，跨父容器时由父容器的层叠顺序决定
装饰线条宽高/颜色受font-size间接影响
当用em或ex单位定义伪元素尺寸（比如height: 0.1em），它的实际像素值会随父元素font-size缩放。这不是 bug，但容易误判线条粗细为何忽大忽小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 装饰线条优先用
px或rem，避免意外继承 - 若需响应式粗细，用
clamp()配合px（如height: clamp(1px, 0.05em, 2px)），比纯em更可控 - 背景色记得检查是否被父元素
color影响——background: currentColor会跟随文字色，有时是巧用，有时是事故
伪元素不是“画布”，它本质是文档树的延伸；所有样式行为都严格遵循 css 渲染规则。最容易出问题的地方，永远是content缺失、定位上下文断裂、以及把伪元素当普通块级元素去套布局直觉。