html代码
<div class="sybt">服务优势</div>
css代码
.sybt {
text-align: center;
color: #696969;
font-size: 30px;
position: relative;/*定位横线(当横线的父元素)*/
display: block;/*设置为块级元素会独占一行形成上下居中的效果*/
}
.sybt::before,
.sybt::after {
content: '';
/*CSS伪类用法*/
position: absolute;
/*定位背景横线的位置*/
top: 52%;
background: #494949;
/*宽和高做出来的背景横线*/
width: 9%;
height: 2px;
}
.sybt::before {
left: 34%;/*调整背景横线的左右距离*/
}
.sybt::after {
right: 34%;/*调整背景横线的左右距离*/
}
效果如下