引子:
最近看小说的时候发现每章之间出现了文字分割线的提示
实现的效果如:------------广告是为了更多免费内容,感谢支持-------------
顿时脑海中就浮现了实现方案:两个伪元素 + 文本内容就可以实现了,然而事实上真的那么简单么?那么我们就来看看吧
思路:
伪元素实现线条效果(前后都有),高宽啥的嗯都很好实现,加上文本内容
效果轻而易举,稍微需要思考下的无非就是如何实现线条的居中,一个合适的宽度
代码:
html代码:
<div class="wrapper">
<div class="div-test__title">
<p>
<span style="margin: 0 2px;">广告是为了免费观