主题分隔线内添加文字

瑜子酱呀

于 2022-04-21 18:14:57 发布

阅读量2.7k

点赞数

文章标签：前端 html5

本文链接：https://blog.csdn.net/m0_52998020/article/details/124327730

版权

HTML CSS 伪元素主题分隔线文本定位

关键词由CSDN通过智能技术生成

今日份元气，Loading.......

<hr>标签和伪元素after相结合，在主题分隔线内添加文字。效果图如下：

<body>内部代码如下：

<body>
    <hr>
</body>

<style>
    hr{
    text-align:center;                <!--设置文字位置为“center”-->
    line-height:20px;                 <!--设置主题分隔线的高度-->
    background:#1eb9b8;               <!--设置主题分隔线的颜色-->
    }

    hr:after{
    content:"你要插入的文字";
    font-weight:bold;                 <!--设置字体粗细：“bold”为粗体-->
    font-size:20px;
    background:pink;
    z-index:2;                        <!--z-index就是层级显示-->
    }

注意：

** z-index就是层级显示，默认是z-index=0;然后按照先后进行层级的覆盖显示。你想使盒子处于最底层，就可以设置负数或者将其他的设置为更大的正数，反之则设为正数或设置为更小的负数。没有绝对的上下层，只有相对的。