使用css伪类before,after制作左右横线中间文字的效果

其实这个在功能在项目中还是经常会需要到的，除了使用背景图片来实现外，我们还可以借助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%;
}