如何使用 CSS 实现 `` 标签内文字两边中间带有横线的样式？-css教程-PHP中文网

如何使用 CSS 实现 `` 标签内文字两边中间带有横线的样式？

心靈之曲

发布： 2024-11-04 21:03:16

原创

952人浏览过

如何使用 css 实现 `` 标签内文字两边中间带有横线的样式？

实现文字两边中间横线的 css 样式

问题：
如何使用 css 实现<p>标签内文字两边中间带有横线的样式？

解决方案：
使用 ::before 和 ::after 伪元素，以及 flex 布局和 content 属性。

代码示例：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

立即学习“前端免费学习笔记（深入）”；

<!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>

登录后复制

在这个示例中：