用::before给段落加装饰线需三要素：content非空、父元素设position: relative、伪元素设display:block；常用写法为p{position:relative}与p::before{content:"";display:block;width:60px;height:2px;background:#333;margin-bottom:0.5em}。
怎么用 ::before 给段落加装饰线
直接在段落元素上加 ::before 伪元素，但必须确保它有内容、定位和尺寸——空的 content: "" 不会渲染，也没法画线。
-
::before必须配content，哪怕只是content: "" - 默认是 inline 级别，想当“横线”用就得设
display: block或inline-block - 如果父元素没设
position: relative，用absolute定位会相对于最近的定位祖先，容易飘走 - 常见写法：
p { position: relative; }<br>p::before { content: ""; display: block; width: 60px; height: 2px; background: #333; margin-bottom: 0.5em; }
::before 装饰线为什么不出现在预期位置
不是代码没生效，而是 CSS 层叠或盒模型理解偏差：伪元素属于父元素的“内容流”，但一旦设了 position: absolute，就脱离文档流，坐标系跟着变。
- 没设
position: relative在父元素上 →top/left会相对于<body>或其他定位祖先 - 用了
margin-top却发现线贴着文字顶边 → 实际是::before的 margin 和段落首行 margin 合并了（外边距折叠） - 想让线居中但用
text-align: center没用 → 那只影响内联内容，得对伪元素本身用left: 50%; transform: translateX(-50%)
装饰线颜色/粗细/长度怎么动态控制
不能直接用变量控制 ::before 的样式，但可以通过自定义属性（CSS 变量）间接传参，前提是父元素上定义、伪元素里读取。
- 支持 CSS 变量的写法：
p.decorated { --line-width: 80px; --line-height: 3px; --line-color: #e74c3c; }<br>p.decorated::before { content: ""; display: block; width: var(--line-width); height: var(--line-height); background: var(--line-color); margin-bottom: 0.6em; } - 注意：变量必须在伪元素的父选择器上声明，
::before自身无法声明:root外的变量 - 响应式场景下，避免用固定
px宽度，改用em或ch更稳妥（比如width: 12ch表示约 12 个字符宽）
兼容性与性能要注意什么
::before 本身兼容性极好（IE8+），但某些组合用法在旧浏览器里会失效，且大量使用可能触发重排。
立即学习“前端免费学习笔记（深入）”；
- IE8 只支持单冒号
:before，双冒号::before会完全忽略——如果还要兼容 IE8，得写两遍 - 用
transform做位移时，Safari 旧版本对transform+absolute的组合渲染不稳定，可加will-change: transform缓解 - 别在一个页面塞几十个带
::before装饰线的<p>还都设animation——伪元素动画会强制触发 layout，滚动卡顿明显
content 必须存在、父容器的定位上下文必须明确、CSS 变量的作用域不能跨过伪元素边界。这些点不卡住，其余都是微调。 
