php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

如何用 CSS 实现文字两侧对齐、中间用红线分隔的优雅效果？

利用 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 实现文字两侧对齐、中间用红线分隔的优雅效果？

以上就是如何用 CSS 实现文字两侧对齐、中间用红线分隔的优雅效果？的详细内容，更多请关注其它相关文章！