[分享]css两边文字中间横线

在CSS中，我们可以通过伪元素（pseudoelements）的方式实现两端文字中间横线的样式。伪元素是CSS中用来给元素添加特定样式的占位符元素，不会在HTML结构中实际存在。下面是实现这种样式的C...

在CSS中，我们可以通过伪元素（pseudo-elements）的方式实现两端文字中间横线的样式。伪元素是CSS中用来给元素添加特定样式的占位符元素，不会在HTML结构中实际存在。

下面是实现这种样式的CSS代码：

.line{
   position:relative;
   text-align:center;
}
.line::before{
   content:';
   position:absolute;
   top:50%;
   left:0;
   right:0;
   border-top:1px solid #000;
}
.line span{
   position:relative;
   z-index:1;
   padding:0 10px;
   background-color:#fff;
} 

首先，我们给需要添加横线的元素添加一个类名 .line，并设置其相对定位（position:relative）和居中对齐（text-align:center）。

然后，利用伪元素的方式在左右两侧添加一条横线。在::before伪元素中设置content属性为空，表示不添加任何内容，而position:absolute让伪元素脱离文档流，可以自由定位。使用top:50%让伪元素自身高度的一半与父元素中心对齐，left:0和right:0则将伪元素的宽度设置为父元素的宽度。最后，设置border-top:1px solid #000让伪元素显示为一条横线。

接下来，我们将两端的文本放置在一个span元素中，并设置它的position:relative和z-index:1，使其出现在伪元素上方，并设置左右padding值来腾出横线与文本之间的间距，最后设置background-color:#fff确保文本的背景颜色与父元素一致。

这样，我们就可以轻松实现两端文字中间横线的效果了。