登录
首页 >  文章 >  前端

如何使用 CSS 实现红框内效果，即文字两边中间的线条？

时间：2024-11-05 17:19:02 358浏览 收藏

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

如何使用 CSS 实现红框内效果，即文字两边中间的线条？

通过 css 实现红框内效果

为了实现红框内的效果，即文字两边中间的线条，可以使用以下 css 代码：

<!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 */
                flex: 1;
                /* 设置红色背景 */
                background-color: red;
                /* 设置高度为 1px */
                height: 1px;
                /* 设置右侧距 */
                margin-right: 10px;
            }
            .text::after {
                /* 添加空内容 */
                content: "";
                /* 设置 flex 比例为 1 */
                flex: 1;
                /* 设置红色背景 */
                background-color: red;
                /* 设置高度为 1px */
                height: 1px;
                /* 设置左侧距 */
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        /* 添加文本到容器内 */
        <div class="text">一段文字</div>
    </body>
</html>

这将创建一个文本容器，其中文本两边各有一条红色的线条。

好了，本文到此结束，带大家了解了《如何使用 CSS 实现红框内效果，即文字两边中间的线条？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

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