css before 和 after

深碍√TFBOYSˉ_ 2023-06-30 10:55 50阅读 0赞

谈自己对after和before的学习；

学css样式，before和after是必须要掌握的，但是直到最近我才感觉摸到他们的门槛；

before和after是伪元素；

解读伪元素三个字：

首先，他具有元素的属性样式，但是本身不属于document文档内，无法被js读取；

白话说法就是：html页面是document文档，div/ul/li/a/span/p等等属于document文档内的元素，所以我们可以通过js的document.get得到html文档里面的元素信息，包括位置、属性、参数、值、内容等等；然而before、after等伪元素，他们都可以拥有标签一样的属性、样式、内容，然而他们不属于document文档，所以无法通过js获取并进行操作；

有了这样的属性，就可以分析到伪元素的优缺点：

缺点：不能通过js控制，那么动态的变换则无法控制，同时不属于document，那么在浏览器调试的时候，浏览器展示的都是document内的元素属性，对于伪元素的调式很不方便；

优点：减少document文档的节点，静态的内容操作，会非常方便；

用法：

<span class="test">
    
    </span>
    
    <style>
        .test{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    
        .test::before{
            content: '2';
        }
    </style>

效果：

![20200117115648781.png][]

换成块元素：

<div class="test">
    
    </div>
    
    <style>
        .test{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    
        .test::before{
            content: '2';
        }
    </style>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMTA4MzEx_size_16_color_FFFFFF_t_70][]

得到结论：

1、伪元素可以适用所有标签，不管是块标签还是非块标签

2、伪元素相当于在该标签内添加了一个新的元素，注意，是标签内部，不是标签外；

<a class="test">
    你好
    </a>
    
    <style>
        .test{
            font-size: 1rem;
        }
    
        .test::before{
            content: '2';
        }
    </style>

网上有很多如上的代码，但是很多初学者可能会认为before添加的 2 是在a标签外的，实际上加上border显示，可以发现 2 这个添加的内容是在a标签内部；

伪元素必须要有 content属性，

它可以什么都不接，如 content:'';但是必须要有；

伪元素添加的内容我们同样的可以当作元素标签一样的添加其他属性，比如display，position，color，font等等一系列属性，同样的他具有父元素下的子元素属性，比如

<div class="test">
    你好
    </div>
    
    <style>
        .test{
            font-size: 1rem;
            position: relative;
        }
    
        .test::before{
            content: '2';
            position: absolute;
            color: red;
            z-index: 2;
        }
    </style>

父元素为relative，伪元素设定为absolute，那么就会相对父元素浮动，效果如：

![202001171209088.png][]

或者是：

<div class="test">
    <a>你好</a>
    </div>
    
    <style>
        .test{
            font-size: 1rem;
            display: flex;
            width: 200px;
            justify-content: space-between;
            border: 1px solid aqua;
        }
        a{
            display: inline-block;
            width: 50px;
            border: 1px solid blueviolet;
        }
        .test::before{
            content: '2';
            color: red;
            display: inline-block;
            width: 50px;
            border: 1px solid red;
        }
    </style>

效果：

![20200117121311160.png][]

由此可以看出，伪元素能够得到像子元素一样的得到父元素的操控，同样，我们可以把伪元素属性可以当作子元素来设置；

伪元素的content，这个是伪元素的重点，content属性，后面可以接：

1、字符串内容

2、url

3、attr，attr是获取父元素的属性值，

<div class="test" name='2'>
    <a>你好</a>
    </div>
    
    <style>
        .test{
            font-size: 1rem;
            display: flex;
            width: 200px;
            justify-content: space-between;
            border: 1px solid aqua;
        }
        a{
            display: inline-block;
            width: 50px;
            border: 1px solid blueviolet;
        }
        .test::before{
            content: attr(name);
            color: red;
            display: inline-block;
            width: 50px;
            border: 1px solid red;
        }
    </style>

这里的attr则获取到了父元素div的name属性值

4、计数器counter

目前我个人常用的是1.3两个操作，url一般来说获取图片，然而不好调试，计数器我大多数都是在动态场景使用，习惯用js控制，所以常用这就是添加内容或者是获取父元素属性值来当添加的内容；

[20200117115648781.png]: https://img-blog.csdnimg.cn/20200117115648781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMTA4MzEx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020011711575316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxMTA4MzEx,size_16,color_FFFFFF,t_70
[202001171209088.png]: https://img-blog.csdnimg.cn/202001171209088.png
[20200117121311160.png]: https://img-blog.csdnimg.cn/20200117121311160.png