CSS如何为多行文本添加自定义分隔线_利用::after与Flex布局

直接用::after加text-align:center会错位，因text-align不影响伪元素定位基准，且绝对定位基于父容器左上角；多行时top:50%居中的是容器高度而非行高中心。

为什么直接用 ::after + text-align: center 会错位？

很多人一上来就给多行文本容器加 text-align: center，再用 ::after 绝对定位画线，结果发现线条只居中在第一行——因为 text-align 不影响伪元素的定位基准，而绝对定位是相对于父容器左上角的。多行文本时，top: 50% 垂直居中的是整个容器高度，不是文字行高中心。

::after 必须配合 display: flex 才能真正撑开并居中

Flex 是目前最稳妥的解法：让容器成为弹性盒子，把文字和伪元素都作为子项参与布局，自然对齐。关键点在于：

• 父容器设 display: flex 和 align-items: center，确保垂直居中不依赖行高
• 文字用 span 包裹（避免直接对 div 文本内容操作），设 white-space: pre-line 或 word-break: break-word 支持换行
• ::before 和 ::after 都设 flex: 1，再用 height: 1px + background 画线
• 两侧留空用 margin 控制，比如 margin: 0 12px，别用 padding，否则会影响 flex 分布

示例代码：

.text-divider {  display: flex;  align-items: center;  font-size: 14px;  color: #666;}.text-divider span {  white-space: pre-line;}.text-divider::before,.text-divider::after {  content: "";  flex: 1;  height: 1px;  background: #ccc;}.text-divider::before { margin-right: 12px; }.text-divider::after { margin-left: 12px; }

多行文本下，line-height 和 height 的组合容易导致线条偏移

如果容器设置了固定 height，又没同步调整 line-height，align-items: center 就会把文字“挤”到视觉中心，但伪元素仍按 flex 轴心对齐，造成错觉上的偏移。真实项目里更推荐：

立即学习“前端免费学习笔记（深入）”；

• 去掉容器的 height，让它由内容撑开
• 用 min-height 控制最小高度（如 min-height: 40px）
• 若必须限制高度，改用 padding-top/padding-bottom 替代 height + line-height

响应式场景下，flex: 1 在小屏可能让线条过短

当容器宽度极窄（比如手机竖屏），flex: 1 会让两侧伪元素抢不到足够空间，线条可能缩成一个点。这时候要加兜底：

• 给伪元素设最小宽度：min-width: 20px
• 或改用 flex: 0 1 auto + width: calc(50% - 32px)（32px = 文字区域预估宽度 + 两边 margin）
• 更简单粗暴的做法：媒体查询里切回单边 border-bottom 方案，放弃“文字居中+双线”效果

真正难的不是画一条线，而是让这条线在文字换行、字号变化、屏幕缩放时始终不漂、不塌、不闪——flex + 伪元素是目前兼容性与可控性平衡得最好的路径，但必须亲手调过 margin 和 min-width 才算落地。