用::before给标题加装饰线需先设标题position: relative，再用绝对定位+背景色或边框绘制线条，配合transform或width控制位置长度，content: ''不可省略，必要时用z-index避免遮挡。
用 ::before 伪元素给标题加装饰线，核心是利用绝对定位 + 边框或背景色绘制线条，并通过 transform 或 width 控制长度和位置。
设置标题相对定位
这是关键前提：伪元素默认相对于最近的已定位祖先定位。标题本身需设 position: relative，否则 ::before 可能脱离标题范围。
- 不加
position: relative，::before可能参照 body 或父容器定位，导致线条错位 - 即使标题是块级元素，也必须显式声明，不能依赖默认文档流
用 border 绘制简洁横线
适合短横线（如居左、居右或两端延伸），代码轻量、兼容性好。
h2 {
position: relative;
padding-left: 16px; /* 预留空间，避免文字重叠 */
}
h2::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 2px;
background: #333;
}-
top: 50%+transform: translateY(-50%)实现垂直居中对齐文字中线 - 宽度可固定（如
32px），也可用width: 100%铺满，再配合left/right控制起始点
用 background + linear-gradient 做渐变/虚线效果
需要更丰富的视觉表现（如渐变色、虚线、斜线）时，用背景替代边框更灵活。
立即学习“前端免费学习笔记（深入）”；
h3::before {
content: '';
position: absolute;
left: 0;
bottom: 4px;
width: 60px;
height: 1px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
}-
bottom: 4px让线条紧贴文字底部（比top: 50%更直观控制垂向位置） - 支持
repeating-linear-gradient实现虚线，例如：background: repeating-linear-gradient(90deg, #000, #000 5px, transparent 5px, transparent 10px);
避免常见坑
实际使用中容易忽略的细节：
-
content: ''不可省略——没有它，::before不会渲染 - 若线条被文字遮挡，检查是否漏了
z-index（伪元素默认 z-index 为 auto，通常在文字下方；可设z-index: 1提升） - 响应式场景下，建议用
em或rem单位控制长度和间距，保持缩放一致性
