css使用before和after做文字左右横线

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%;/*调整背景横线的左右距离*/
}

效果如下