如何用Flexbox和伪元素实现无需左右Div的多行贯穿线标题

当然没问题！完全不用额外添加左侧/右侧的div，只靠.header类的::before和::after伪元素就能轻松实现你要的跨多行贯穿线标题效果，还能保持HTML结构的简洁性。

实现思路 #

核心思路是利用flex布局让文字和伪元素线条垂直居中，用伪元素替代原本的.line容器：

• 给.header设置display: flex和align-items: center，让文字和两侧线条垂直对齐
• 用::before和::after生成伪元素，通过flex: 1让它们自动占满容器剩余空间，同时设置线条样式
• 用gap属性控制文字和线条的间距，避免视觉上过于拥挤

完整代码示例 #

HTML结构（超简洁！） #

<div class="container">
  <h2 class="header">这是一个可以跨多行的<br>贯穿线标题示例</h2>
</div>

CSS样式 #

.container {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px; /* 给容器加内边距，避免线条贴到页面边缘 */
}

.header {
  font-size: 50px;
  display: flex;
  align-items: center;
  gap: 30px; /* 调整这个值可以改变文字和线条的间距 */
  text-align: center;
  margin: 0;
}

/* 生成左右两侧的贯穿线 */
.header::before,
.header::after {
  content: ""; /* 伪元素必须设置content才能显示 */
  flex: 1; /* 让伪元素占满剩余空间，实现自适应宽度 */
  height: 2px;
  background-color: black;
}

额外优化提示 #

• 如果想要线条和文字的垂直对齐更精准，可以调整.header的align-items属性，比如改成align-items: baseline
• 要是需要不同的线条样式，比如虚线、渐变，直接修改伪元素的background或者border属性就行
• 这个方案完全支持标题文字自动换行，不管标题分几行，两侧的线条都会始终和整个标题块垂直居中对齐

内容的提问来源于stack exchange，提问作者dev-vsg