其实这个在功能在项目中还是经常会需要到的，除了使用背景图片来实现外，我们还可以借助css伪类before,after来实现。
效果图
HTML代码
<span>这是中间的文字</span>
CSS代码
span {
display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
font-size: 3em;
color: #212121;
position: relative; /*定位横线（当横线的父元素）*/
}
span:before, span:after {
content: ''; /*CSS伪类用法*/
position: absolute; /*定位背景横线的位置*/
top: 52%;
background: #494949; /*宽和高做出来的背景横线*/
width: 9%;
height: 2px;
}
span:before{
left: 25%; /*调整背景横线的左右距离*/
}
span:after {
right: 25%;
}
网友评论