用::before给h2左侧加竖线最轻量可控，需设h2为position:relative，::before用absolute定位并声明content:""；宽度用px防虚化，高度推荐calc(1em+0.5ex)适配缩放，中英文混排时用px更可靠。
如何用 ::before 给 h2 左侧加一条竖线
直接写：给标题加左侧装饰线，::before 是最轻量、最可控的方式，不用额外标签，也不影响语义结构。
关键不是“能不能加”，而是怎么让这条线对齐稳定、不挤占文字、响应式下不崩。常见错误是设了 position: absolute 但没配 position: relative 在父元素上，结果线飘到页面左上角。
- 必须给标题（比如
h2）加position: relative -
::before用position: absolute，再通过left和top精确锚定位置 - 宽度建议用
px（如2px），避免缩放时线变虚或消失 - 高度设为
100%或具体值（如1.5em），别用100vh这类全局单位
h2 {
position: relative;
padding-left: 16px;
}
h2::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 1.5em;
background-color: #333;
}
::before 的 content 为什么不能留空或删掉
伪元素必须有 content 声明，哪怕只是空字符串。删掉或写成 content: none（非法值）都会导致整个 ::before 不渲染——这是 CSS 规范硬性要求，不是浏览器 bug。
常见误操作：复制别人代码时漏了 content: ""，或者用预处理器变量拼错，结果线死活不出现。
-
content: ""是标准写法，双引号不能省 -
content: " "（空格）也能触发，但可能引发意外空白或换行，不推荐 -
content: attr(data-line)可用于动态控制显隐，但需配合 HTML 属性
响应式下左侧线错位或截断怎么办
错位主因是 top + transform 计算依赖行高，而不同屏幕字体大小变化后，1.5em 高度和 50% 垂直居中可能失准；截断则多因父容器 overflow: hidden 或高度被限制。
更鲁棒的做法是避开百分比定位，改用基于字体度量的单位：
- 把
top: 50%换成top: 0.25em（约等于字母 x 高度的一半） - 高度用
calc(1em + 0.5ex)，ex是小写字母 x 高度，随字体缩放自然适配 - 确保父元素没有
overflow: hidden，尤其在 flex 或 grid 容器里容易漏查
h2::before {
top: 0.25em;
height: calc(1em + 0.5ex);
}
多个标题共用同一样式时，如何避免线长不一致
如果 h2 文字跨行，height: 100% 会取整行高，但多行文本的实际渲染高度受行距、字体度量影响，导致每条线长度参差不齐。
解决思路不是强行统一高度，而是让线“贴着文字内容区”生长：
- 用
display: inline-block包一层span再套伪元素（侵入 HTML，但最稳） - 或放弃
100%，改用line-height× 行数估算，例如单行就用1.4em，双行用2.8em - 更推荐：用
background-image: linear-gradient()直接画线，规避伪元素定位问题（但失去独立控制力）
真正难处理的是中英文混排场景——中文字体无 ex，ch 单位又不稳定，这时候老实用 px 锚定反而更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
