用::before和::after实现文字两侧横线需包裹文字于容器（如span或h2），设display:inline-flex/align-items:center，伪元素content:""、flex:1、border-top；IE11兼容用display:table布局。
用 ::before 和 ::after 实现文字两侧横线
核心是把文字包裹进一个 span 或 h2，再用伪元素在左右撑出横线。不能直接对纯文本节点用伪元素，必须有可定位的容器。
- 文字容器需设
display: inline-flex或display: table（否则width: 100%在伪元素上无效） -
::before和::after必须设content: ""，否则不渲染 - 避免用
float—— 容易导致父容器高度塌陷，且与 flex 布局冲突
横线长度控制：用 flex 比 width 更可靠
固定宽度（如 width: 40px）在不同字号或缩放下容易错位；用 flex: 1 让横线自动填满剩余空间，更健壮。
- 容器设
display: inline-flex; align-items: center; -
::before和::after设flex: 1; border-top: 1px solid #000; - 文字本身加
margin: 0 16px避免紧贴横线
h2 {
display: inline-flex;
align-items: center;
}
h2::before,
h2::after {
content: "";
flex: 1;
border-top: 1px solid #000;
}
h2 > span {
margin: 0 16px;
}
兼容性注意：inline-flex 在 IE10+ 支持，但 IE11 有渲染 bug
IE11 下 inline-flex 容器内的伪元素可能不占宽，导致横线消失。稳妥方案是降级为 display: table 布局。
- 容器设
display: table; width: 100%; -
::before和::after设display: table-cell; width: 50%;并用border-top - 文字用独立
span并设display: table-cell; text-align: center; - 这个写法在 IE8+ 都能工作，但失去弹性伸缩能力
字体变化时横线位置偏移？检查 line-height 和 vertical-align
横线默认沿基线对齐，如果文字用了非默认 line-height 或 vertical-align，横线会浮高或下沉。
立即学习“前端免费学习笔记（深入）”；
- 统一设
line-height: 1.2（推荐无单位值） - 伪元素加
vertical-align: middle或vertical-align: baseline显式对齐 - 若文字含
sub/sup，横线会相对错位——此时应避免混用，或改用背景渐变模拟分割线
white-space 行为：如果父元素设了 white-space: nowrap，而文字又超长，横线会被截断。需要确认外层是否意外限制了换行或溢出。 
