实现文字两边中间横线的 样式
问题：
如何使用 css 实现
标签内文字两边中间带有横线的样式？
解决方案：
使用 ::before 和 ::after 伪元素，以及 flex 布局和 content 属性。
代码示例：
立即学习“”；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.text {
display: flex;
align-items: center;
justify-content: center;
}
.text::before {
content: "";
flex: 1;
background-color: red;
height: 1px;
margin-right: 10px;
}
.text::after {
content: "";
flex: 1;
background-color: red;
height: 1px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="text">一段文字</div>
</body>
</html>
登录后复制
在这个示例中：
- * 样式选择所有元素，并重置它们的边距和内边距。
- .text 类样式将文本元素设置为水平居中，且垂直对齐线为中间。
- ::before 伪元素在元素之前创建一个块状盒子，并为其设置红色背景和宽度为 1px 的横线。
- ::after 伪元素在元素之后创建一个块状盒子，并为其设置红色背景和宽度为 1px 的横线。
- margin 属性用于调整水平线与文本之间的间距。
以上就是如何使用 CSS 实现 “ 标签内文字两边中间带有横线的样式？的详细内容，更多请关注米云其它相关文章！
