css在文字兩邊加線，文字居中效果——實戰應用

想要的效果如下圖所示，利用CSS偽類效果

 

HTML代碼如下

<div class="work-intro">
            <div class="title">
            <h2 class="title-text"><span>工作經歷</span></h2>
            </div>
</div>

CSS代碼如下

.title-text span {
    display: block;      /*設置為塊級元素會獨占一行形成上下居中的效果*/

    position: relative;  /*定位橫線（當橫線的父元素）*/

    color: #188eee;      /*居中文字的顏色*/

    text-align: center; 
} 

.title-text span:before, .title-text span:after { 
    content: ''; 
    position: absolute;   /*定位背景橫線的位置*/

    top: 50%; 
    background: #8c8c8c;   /*背景橫線顏色*/

    width: 35%;            /*單側橫線的長度*/

    height: 1px; 
} 

.title-text span:before { 
    left: 2%;              /*調整背景橫線的左右距離*/

} 

.title-text span:after { 
    right: 2%; 
}

 

參考的大神鏈接：http://blog.csdn.net/baidu_33163851/article/details/51304347