css伪元素 before after的用法

橘猫敲代码

已于 2023-03-17 13:33:22 修改

阅读量895

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2023-03-16 16:42:57 首次发布

本文链接：https://blog.csdn.net/m0_61726249/article/details/129590399

在日常的代码中经常会发现类名带有::before 或者::after，但是这两个到底是什么呢？

举个小demo

<body>
    <div class="box">
        我的橘猫
    </div>
</body>
<style>
    .box{
        background-color: pink;
        width: 300px;
        height: 300px;
    }
    .box::before{
        content: 'before的内容';
        background-color: orange;
        width: 200px;
        height: 200px;
   
    }
    .box::after{
        content: 'after的内容';
        background-color: lightblue;
        width: 400px;
        height: 400px;
    }
</style>

然后我们发现，给before和after设置了宽高，但是并没有起作用，也没有独占一行，由此可见 after和before都属于行内元素。如果要改变宽高还需要用到display：inline-block或display：block，这里并不赘述。

除了可以改变样式外，我们会发现每一个都用到了content，注意：这个content属性必须填写，如果我们不想写内容额可以设置为空串 content:''

然后举一个最近用到的例子吧，改变elementui 弹窗样式，正常的如下这种样式

改变样式需要在提示下加一条横线，类似这种。

这个就可以用到这个::after伪元素了，还那刚才的样式举例子

<body>
    <div class="box">
        我的橘猫
    </div>
</body>
<style>
    .box {
        background: green;
        width: 300px;
        height: 300px;
        color: #fff;
        padding-top: 12px;
        padding-left: 12px;
    }

    .box::after {
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background: #dddee2;
        margin-left: -8px;
        margin-top: 12px;
    }
</style>