关于文字与横线之间的关系，之前写过一篇：

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;}