文字兩側加橫線的解決方案

文字兩側加橫線的需求你遇到過嗎？在參與的項目中我遇到過這種需求，總結了一下,目前分爲兩種:

一，文字所在的背景是純色，單一顏色；

二，文字所在背景是花色，或者是背景圖片

給你一些時間，思考一下：

腦海閃過了什麼？定位，浮動，背景圖片，僞元素。。。仍是大腦一片空白？

條條大路通羅馬，相信給你足夠的時間，靜靜的坐在開着空調的房間裏，你會獲得本身的實現方法。

先看第一種，背景純色的實現方案。

用的一個方法是用一個空的標籤，來寫這條橫線。固然也能夠用背景圖，切一箇中間透明，兩邊白條的圖片。也能夠使用僞元素。before after先後夾擊。

在背景爲圖片的時候使用了僞元素這種方法，我的感受僞元素這個東西真的是太強大了。

廢話不說上代碼：

HTML:

<div class="onpure_bg">
    <h2 class="onpure">
        <span class="onpure_title">標題在此</span>
    </h2>
    <span class="line"></span>

</div>
複製代碼

CSS:

/*純背景實現原理代碼*/
.onpure_bg{
    background: #ccc;
    width: 700px;
    height: 400px;
    margin:0 auto;
    background-size: cover; 
    position: relative;
}
.onpure{
    position: absolute;
    top: 70px;
    left:50%;
    width: 150px;
    margin-left: -75px;
    margin-top: 50px; 
    z-index: 1
}
.onpure_title{
/*關鍵點：設置和背景顏色同樣的顏色。*/
    background:#ccc;
    padding:0px 20px; 
}
.line{
    display: inline-block;
    width: 500px;
    height: 0px;
    border: 2px solid #fff;
    position: absolute;
    top:130px;
    left: 50%;
    margin-left: -250px;
}

複製代碼

代碼解析：

把標題和線條定位左右居中，上下靠上部分，用z-index將文字層級放置線條上方，在給標題使用和背景色同樣的背景色。padding設置左右值撐開空隙。

It is so easy!

再來看背景爲圖片的實現方法，很顯然，上邊的方法取了個巧，利用背景色一致看不出差異。換成一張有複雜的背景圖案的圖片，這種方法就失效，咱們藉助僞元素來實現。

代碼

HTML

<div class="onimg_bg">
    <h2 class="onimg">
        <span class="onimg_title">標題在此</span>
    </h2>
</div>
複製代碼

CSS

/*背景圖片實現原理代碼*/

.onimg_bg{
    background: none no-repeat;
    width: 700px;
    height: 400px;
    margin:0 auto;
    background-size: cover; 
    position: relative;
    margin-bottom: 20px;
}

.onimg{
    position: absolute;
    top: 70px;
    left:50%;
    width: 600px;
    margin-left: -300px;
    text-align: center;
}
/*僞元素實現*/
.onimg_title:before{
    display: inline-block;
    position: relative;
    top:-7px;
    right: 20px;
    content: "";
    width: 200px;
    height: 0px;
    border: 2px solid #fff;
}
.onimg_title:after{
    display: inline-block;
    position: relative;
    top:-7px;
    left: 20px;
    content: "";
    width: 200px;
    color: #fff;
    height: 0px;
    border: 2px solid #fff;
}

複製代碼

僞元素這種方法，也很簡單，剛遇到的時候也是糾結了一下子，有時候是思路的問題，想到這個方法，問題就迎刃而解了。

代碼解析：

須要注意的是使用僞元素content屬性必不可少，而後給僞元素塊級化，就能夠像設置正常的元素同樣設置你想要的樣式了，在這裏設置了一個沒有高度，寬200px的長條，經過border控制高;

也能夠經過設置背景圖片background: none no-repeat，代替border實現

針對這種需求，目前只想到僞元素實現，若是您有更好的方法，歡迎留言。