
实现文字两边中间横线的 css 样式
问题:
如何使用 css 实现
标签内文字两边中间带有横线的样式?
解决方案:
使用 ::before 和 ::after 伪元素,以及 flex 布局和 content 属性。
代码示例:
立即学习“前端免费学习笔记(深入)”;
Document
一段文字
在这个示例中:
- * 样式选择所有元素,并重置它们的边距和内边距。
- .text 类样式将文本元素设置为水平居中,且垂直对齐线为中间。
- ::before 伪元素在元素之前创建一个块状盒子,并为其设置红色背景和宽度为 1px 的横线。
- ::after 伪元素在元素之后创建一个块状盒子,并为其设置红色背景和宽度为 1px 的横线。
- margin 属性用于调整水平线与文本之间的间距。










