使用CSS制作左右横线中间文字效果，直接使用

 

如图上，所示的效果，直接上css代码， 

HTML代码：

<div class="item-intro">
   <div class="title-text"><span>工作经历</span></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%; 
}