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

资料来源：网络整理时间：2023/3/4 1:04:49 共计：3600 浏览

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

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS 中间文字、两侧居中横线（使用伪类before，after）_CSS学习 | ·下一条：CSS修改swiper幻灯片自定义切换剪头特效(背景图、位置、背景色、尺寸)_网页特效