关于实现文字分割线的一些问题

原创

于 2020-06-06 17:10:21 发布 · 554 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文探讨了在实现文字分割线时遇到的问题，包括线条的居中、宽度适应及不同解决方案的尝试。通过CSS的伪元素和绝对定位，实现了线条跟随父容器宽度变化的效果，同时利用文本元素背景覆盖来模拟两端都有线条的视觉效果。关键点在于伪元素的定位、层叠水平以及背景颜色的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引子：

最近看小说的时候发现每章之间出现了文字分割线的提示

实现的效果如：------------广告是为了更多免费内容，感谢支持-------------

顿时脑海中就浮现了实现方案：两个伪元素 + 文本内容就可以实现了，然而事实上真的那么简单么？那么我们就来看看吧

思路：

伪元素实现线条效果（前后都有），高宽啥的嗯都很好实现，加上文本内容

效果轻而易举，稍微需要思考下的无非就是如何实现线条的居中，一个合适的宽度

代码：

html代码：

<div class="wrapper">
    <div class="div-test__title">
        <p>
            <span style="margin: 0 2px;">广告是为了免费观看视频而制作的!</span>
        </p>
    </div>
</div>

css代码：

最低0.47元/天解锁文章

200万优质内容无限畅学