在网页设计中，经常能看到一种经典样式：一段文字居中显示，文字的左右两侧各有一条水平线条，线条与文字之间留有适当间距。这种效果常用于区块标题、表单分隔或专题页头部，既简洁又富有装饰性。本文将介绍几种纯 CSS 的实现思路，并分析各自的优缺点，帮助你根据实际场景选择最合适的方案。
方案一：flex 布局配合伪元素（推荐）
这是目前最主流、最灵活的实现方式。核心思路是把容器设置为弹性布局，让文字节点位于中间，左右两个伪元素各占一份空间并绘制线条。::before和::after伪元素分别生成左右两侧的线，通过flex: 1让它们自动平分剩余空间，再利用content属性撑起高度形成可见线条。
.line-title {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 18px;
color: #333;
}
/* 左侧线条 */
.line-title::before {
content: "";
flex: 1;
height: 1px;
background: #ccc;
max-width: 200px;
}
/* 右侧线条 */
.line-title::after {
content: "";
flex: 1;
height: 1px;
max-width: 200px;
background: linear-gradient(to right, #ccc, #999);
}
这种写法的优势在于线条宽度会随容器自适应伸缩。当文字变长时，线条自动缩短；文字变短时，线条自动延长。配合max-width可以限制线条的最大长度，避免在超宽容器中线条过长显得空洞。此外，线条的样式可以任意定制，比如改成虚线border-top: 1px dashed #ccc，或使用渐变色背景，灵活性非常高。
需要注意的一点是，如果容器不是全宽的，两侧线条只会延伸到容器边界。因此这种方案通常把容器宽度设为百分百，或者给容器足够的可用空间。另外，gap属性控制文字与线条的间距，比使用margin更直观，但需要浏览器支持 flex 布局中的gap，旧版浏览器可以退回使用 margin 实现间距。
方案二：背景渐变叠加实现
第二种思路不需要伪元素，而是利用多重背景。先给容器设置一条贯穿整个宽度的细线作为背景，再让中间的文字部分用一个不透明背景色矩形覆盖住线条，从而在视觉上只露出左右两侧的线。这种做法的关键在于背景的定位与尺寸计算。
.line-bg {
text-align: center;
font-size: 18px;
padding: 0 20px;
/* 一条贯穿全宽的线，位于垂直中间 */
background-image: linear-gradient(to right, #ccc, #ccc);
background-size: 100% 1px;
background-position: center;
background-repeat: no-repeat;
}
/* 文字本身用背景色遮挡线条 */
.line-bg span {
background: #fff; /* 必须与父容器背景色一致 */
padding: 0 16px;
}
<div class="line-bg"> <span>中间的文字</span> </div>
这种方案的优点是结构简单，不需要伪元素，一行背景声明就能画出线条。但它的缺点也很明显：文字的遮挡依赖背景色，如果页面背景是图片或渐变，遮挡效果就会失效，出现线条穿透文字背景的情况。因此它只适合纯色背景的场景。此外，HTML 结构中必须有一个额外的span包裹文字，增加了少量标记成本。
如果希望线条带渐变效果，只需修改background-image即可，例如linear-gradient(to right, transparent, #ccc 20%, #ccc 80%, transparent)，可以让线条两端自然淡出，视觉效果更柔和。
方案三：border 加负外边距的传统写法
在 flex 布局普及之前，开发者常用的一种方式是给文字元素设置左右边框，再用负的外边距把边框向外拉伸。由于边框紧贴文字，需要借助内边距留出间隙，负外边距则让线条延伸出去。
.line-border {
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
overflow: visible;
}
.line-border span {
border-left: 100px solid #ccc;
border-right: 100px solid #ccc;
padding: 0 16px;
display: inline-block;
margin-left: -116px;
margin-right: -116px;
}
这种写法的线条宽度是固定的，无法自适应容器变化。当容器宽度小于文字加两侧边框的总宽度时，布局就会错乱或出现滚动条。它的优点是兼容性极好，即使在非常老旧的浏览器中也能正常渲染，因此在需要兼容老项目的场景下仍有价值。
实际开发中更常见的变体是外层用overflow: hidden裁剪超出的边框，让线条始终贴合容器两端，但这样文字过长换行时线条位置会变得不可控。总体来说，除非有明确的旧浏览器兼容需求，否则不建议优先采用这种方案。
三种方案对比与选择建议
| 方案 | 自适应能力 | 兼容性 | 结构复杂度 |
|---|---|---|---|
| flex + 伪元素 | 强，线条随容器伸缩 | 现代浏览器全支持 | 低，无需额外标签 |
| 背景渐变遮挡 | 强，线条占满全宽 | 好，但依赖纯色背景 | 中，需要 span 配合 |
| border + 负边距 | 弱，固定宽度 | 极好，兼容老浏览器 | 中，数值计算繁琐 |
综合来看，flex 配合伪元素的方案在灵活性、可维护性和代码量之间取得了最好的平衡，是新项目的首选。如果页面背景为纯色且希望代码更精简，背景遮挡法也是不错的选择。border 方案则保留给特殊兼容需求。
最后再补充一个实用技巧：如果想让线条只在单侧出现，或者两侧样式不对称（例如左侧实线右侧渐变线），只需分别修改::before和::after的样式即可，这正是伪元素方案的最大魅力所在。掌握了这些思路后，诸如「标题上下带线」「标签两侧带短线」等衍生效果都可以举一反三地实现。