CSS伪元素实现文字分割线教程

本文详解如何利用CSS伪元素::before和::after为文字添加两侧横线的分割线效果，强调必须将文字包裹在可定位容器（如span或h2）中才能生效，并推荐采用inline-flex布局配合flex:1和border-top实现健壮、自适应的横线伸缩；同时深入剖析IE11兼容性陷阱，提供table布局降级方案，以及line-height、vertical-align、white-space等易被忽视却关键的细节处理，帮助开发者规避常见错位、塌陷、截断等问题，写出稳定跨浏览器的优雅分割线样式。

用 ::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，而文字又超长，横线会被截断。需要确认外层是否意外限制了换行或溢出。

本篇关于《CSS伪元素实现文字分割线教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！