经常在网上看见一下分割效果,或者模块标题效果:
代码结构:
<div class="fenge"> <span>以上为精彩评论</span> </div> <style> .fenge { text-align: center; position: relative; margin: 100px 20px; } .fenge:after { right: 0; } .fenge span { font-size: 12px; color: #99a2aa; line-height: 14px; vertical-align: top; } .fenge:after, .fenge:before { content: ""; border-bottom: 1px solid #e8eaec; width: calc(50% - 50px); display: block; position: absolute; top: 7px; } </style>