關于文字與橫線之間的關系，之前寫過一篇：

CSS，中間文字 兩邊橫線 CSS樣式寫法 

如上圖，本文要分享的是兩邊文字、中間橫線的CSS寫法，比較簡單：

HTML：

<div class="title">
   <span class="name"><i class="iconfont hd-title-icon">&#xe65e;</i>子分類5</span>
   <span class="more"><a href="#">更多<i class="iconfont">&#xe616;</i></a></span>
</div>

CSS:

.title{padding-left: 10px; height: 13px;border-bottom: 1px solid #E3E9EF;line-height: 24px;margin-bottom: 22px;margin-bottom: 50px;}
.title span{display: inline-block;background-color: #F6F8FA;}
.title span.name{padding-right: 20px;font-size: 30px;color: #212B34;font-weight: 100;}
.title span.name i{display: inline;font-size: 38px;margin-right: 8px;}
.title span.more{float: right;padding-left: 20px;color: #87959F;font-size: 12px;}
.title span.more i{margin-left: 8px;}
.title span.more a{color: #87959F;}