两边文字、中间横线的CSS写法

老白 3个月前 215浏览 0评论

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

CSS,中间文字 两边横线 CSS样式写法 

QQ截图20170916122313.png 两边文字、中间横线的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;}


发表评论