登录
首页 >  文章 >  前端

如何用 CSS 实现文字两边加中划线效果？

时间：2024-11-25 20:27:40 438浏览 收藏

今天golang学习网给大家带来了《如何用 CSS 实现文字两边加中划线效果？》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

如何用 CSS 实现文字两边加中划线效果？

如何实现文字两边中划线的效果？

为了在文字的两边添加红框中所示的中划线，可以利用 css 中的 ::before 和 ::after 伪元素。

步骤：

  1. 将文本元素（如 <p>）设置为 flex 布局，文本居中对齐。
  2. 使用 ::before 伪元素在文字前添加一个红线，设置 flex 属性为 1 以占据可用的剩余空间，并向右留出一定的边距。
  3. 使用 ::after 伪元素在文字后添加另一个红线，同样设置 flex 属性为 1 并向左留出边距。

代码示例：

<!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 实现文字两边加中划线效果？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>