其實(shí)這個(gè)在功能在項(xiàng)目中還是經(jīng)常會(huì)需要到的，除了使用背景圖片來(lái)實(shí)現(xiàn)外，我們還可以借助css偽類(lèi)before,after來(lái)實(shí)現(xiàn)。

效果圖

HTML代碼

<span>這是中間的文字</span>

CSS代碼

span {
    display: block;     /*設(shè)置為塊級(jí)元素會(huì)獨(dú)占一行形成上下居中的效果*/
    font-size: 3em;
    color: #212121;
    position: relative;   /*定位橫線（當(dāng)橫線的父元素）*/
}

span:before, span:after {
    content: '';                 /*CSS偽類(lèi)用法*/
    position: absolute;         /*定位背景橫線的位置*/
    top: 52%;
    background: #494949;       /*寬和高做出來(lái)的背景橫線*/
    width: 9%;
    height: 2px;
}

span:before{
    left: 25%;        /*調(diào)整背景橫線的左右距離*/
}

span:after {
    right: 25%;
}