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

引子：

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

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

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

思路：

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

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

代码：

html代码：

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

css代码：