利用 css 实现文字中间分隔线的优雅方式
问题描述：如何在 html 文档中实现
标签内文字两侧对齐、中间用红线分隔的效果？实现方式：
借助 css 的 flex 属性，我们可以将文字元素转换为一行布局，同时利用 ::before 和 ::after 伪元素在文本两侧插入红色分隔线。具体代码如下：
<!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>具体效果如下：
立即学习“前端免费学习笔记（深入）”；
以上就是如何用 CSS 实现文字两侧对齐、中间用红线分隔的优雅效果？的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系 yyfuon@163.com
