最稳的响应式横线标题方案是display: flex+::before/::after+flex-grow: 1，但需规避伪元素不参与布局、IE11失效、小屏无剩余空间三类故障。
直接说结论：用 display: flex + ::before/::after + flex-grow: 1 是目前最稳的响应式横线标题方案，但必须规避伪元素在 flex 容器中不参与布局、IE11 渲染失效、小屏无剩余空间这三类典型故障。
为什么 flex-grow: 1 比 width: 50% 更可靠
固定百分比（如 width: 45%）在小屏下极易溢出或过短，而 flex-grow: 1 会自动吃掉父容器内“文字没占满”的空白区域——前提是父容器有明确宽度且文字不撑满整行。
- 文字必须是
display: inline或未设width的块级元素；若标题加了width: 100%或flex: 0 0 auto，flex-grow就没空间可长 - 父容器需设
display: flex和justify-content: center，否则左右伪元素会挤在一起或靠边 - 别给伪元素设
flex: 0 1 auto—— 它会让伪元素退化为内容宽度，失去伸缩性
::before 在 flex 容器里不显示或不伸展的常见原因
伪元素默认不是 flex 子项，即使父容器是 display: flex，::before 也可能被忽略或按行内方式渲染。
- 必须显式写
.title::before { content: ""; display: block; }—— 缺少content或display会导致完全不渲染 - 如果父元素用了
flex-direction: column，flex-grow: 1作用在高度上，横线就变竖线了；确保是row方向 - 某些 CSS 重置库（如 normalize.css）会把
h1等标题设为display: block，需手动覆盖为display: flex
小屏下横线缩成一个点？其实是容器没留白
这不是 flex-grow 失效，而是标题文字在窄屏下占满整行，父容器剩余空间为零。伪元素再想“长”，也无处可长。
- 给标题父容器加
max-width: 90vw或width: fit-content，强制留出左右空白 - 对伪元素加
min-width: 1.25rem（20px），防止极端窄屏下完全消失 - 避免用
vw控制伪元素宽度——它和flex-grow混用时，浏览器计算优先级混乱，尤其在 zoom 场景下 - 移动端可配合
@media (max-width: 480px)把font-size调小 2px，间接扩大可用空白区
IE11 兼容性必须单独处理
IE11 对 ::before 在 display: flex 容器中的支持近乎为零：要么不渲染，要么不参与 flex 分配。这不是写法问题，是引擎限制。
- 检测用
@supports (-ms-ime-align: auto)比@supports not (display: flex)更准 - 降级方案优先选
background-image: linear-gradient(to right, #ccc 0%, #ccc 100%)配合background-size: 100% 1px，它在 IE11 完全可用 - 若坚持用伪元素，IE11 下可改用
border-left: 1px solid #ccc+padding-left: 1rem模拟左线，右线同理，但需手动调间距 - 绝对别写
flex: 1到伪元素上——IE11 会直接跳过整个规则
真正难的不是写出那几行 CSS，而是判断当前标题是否处于“有空白可长”的状态：它取决于字体、行高、父容器约束、设备像素比，甚至系统缩放设置。每次换字体或改断点，都得重新验证横线是否还居中、是否还可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
