使用before、after给文字前后添加横线

使用before、after给文字前后添加横线

 <div class="reward-title">荣誉资质</div>

css横线居中

.reward-title {
    font-size: 24px;
    font-weight: 400;
    padding-bottom: 52px;
}

.reward-title:before {
    content: '';
    width: 80px;
    height: 1px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    margin-right: 24px;
    margin-bottom: 10px;
}
.reward-title:after {
    content: '';
    width: 80px;
    height: 1px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    margin-left: 24px;
    margin-bottom: 10px;
}

demo地址

示例图片