用::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 单位控制长度和间距，保持缩放一致性