学习日记-- 伪类划出两边直线效果

html

    <div class="note-title">
      <span>砍价记录</span>
    </div>

css文件

.note-title span:before, .note-title span:after {
    content: '';                 /*CSS伪类用法*/
    position: absolute;         /*定位背景横线的位置*/
    background: #ffa3a3;       /*宽和高做出来的背景横线*/
    width: 34%;
    height: 1px;
    margin-top: .15rem;
}
 
.note-title span:before{
    left: 4%;        /*调整背景横线的左右距离*/
}
.note-title span:after {
    right: 4%;
}

效果