伪元素::before横线失效的主因是标题未设position: relative导致定位错乱，且content: ""缺失；正确做法是标题设relative、content必写、用top: 50%+transform居中、width用clamp响应式控制。
标题必须设 position: relative
伪元素 ::before 默认相对于最近的「已定位祖先」定位。如果标题（比如 h2）没设 position: relative，浏览器会一路向上找——可能落到 body 或某个父容器上，结果横线飘到页面左上角、或压在其他元素下面。
这不是 bug，是 CSS 定位机制的正常表现。只要标题本身有 position: relative，::before 就能以它为坐标系，left、top 才真正可控。
- 别给所有
h1~h6全局加position: relative，避免干扰其他布局逻辑 - 如果标题已是
position: absolute或fixed，不用再加relative，但得确认其父容器是否撑开、是否遮挡伪元素 - 若标题内嵌了
span或链接，且用了z-index，记得给::before配合设z-index: -1（否则横线可能被文字盖住）
::before 必须声明 content: ""
content 是伪元素的“开关”：删掉、写成 content: none（非法值）、或留空不写，整个 ::before 都不会渲染——这是 CSS 规范强制要求，不是浏览器兼容问题。
常见误操作是复制代码时漏掉这行，或用 CSS 预处理器拼接变量出错（比如 content: var(--line-content, ""); 里变量为空导致失效）。
立即学习“前端免费学习笔记（深入）”；
- 只接受字符串、
attr()、counter()或none（但none不触发渲染） - 写成
content: " "（空格）也能显示，但可能引入不可见空白，推荐统一用content: "" - 如果用
display: block而非position: absolute，也要确保content存在，否则仍不出现
垂直居中用 top: 50% + transform: translateY(-50%)
想让横线对齐文字中线，靠 line-height 计算或 margin-top 微调，在字号变化、多行标题、中英文混排时极易偏移。top: 50% + transform: translateY(-50%) 是唯一稳定解法，它不依赖字体度量，也不受行高影响。
用 bottom: 4px 也可以，适合紧贴文字基线的场景（如下划线），但对“居中横线”不够通用。
- 别用
vertical-align——它对position: absolute无效 - 如果标题用了
flex或grid布局，top: 50%依然有效，前提是父级有明确高度或内容撑开 - 在缩放比例 > 100% 的系统设置下，
transform比纯top更抗锯齿失真
宽度与响应式要手动控制
::before 的 width 默认是 auto，但作为装饰线，通常需要固定长度（如 40px）或按比例伸缩（如 width: 100%）。直接写 width: 100% 可能撑满整个标题容器，反而失去“短横线”的设计意图。
响应式下容易出问题：小屏时文字变宽、容器变窄，flex: 1 方案在 Safari 中可能因渲染精度丢失线条；width: 32px 这类固定值又可能在大屏上显得太短。
- 推荐用
width: clamp(24px, 8vw, 48px)平衡缩放与最小可见性 - 竖线用
height，横线用width，都建议用px或em，避免%在弹性容器中计算混乱 - 媒体查询里改
width和left值比改font-size更安全，后者会影响整行布局
最常被忽略的其实是定位上下文和 content 的存在性——这两点一错，横线就彻底消失，连调试器里都看不到节点。其余都是微调，但起点错了，后面全白搭。
