
如何实现文字两边中划线的效果?
为了在文字的两边添加红框中所示的中划线,可以利用 css 中的 ::before 和 ::after 伪元素。
步骤:
- 将文本元素(如
)设置为 flex 布局,文本居中对齐。
- 使用 ::before 伪元素在文字前添加一个红线,设置 flex 属性为 1 以占据可用的剩余空间,并向右留出一定的边距。
- 使用 ::after 伪元素在文字后添加另一个红线,同样设置 flex 属性为 1 并向左留出边距。
代码示例:
立即学习“前端免费学习笔记(深入)”;
Document
一段文字
通过这些步骤,可以实现红框中所示的文字两边中划线效果。










