神奇的伪元素加蒙版

伪--顾名思义：不是有真实的但有其外观，伪装的，假的，骗人的 

所以：
 伪元素是一种虚拟的元素，css把他当成普通的HTML元素看待 。

 伪元素，在文档树或DOM中并不是实际存在。换句话说，不会在HTML中包含为元素，只会通过css来创建 。

 ":before" 伪元素可以在元素的内容前面插入新内容，元素的内容可以指的是子元素，也可以是文本。 

 ":after" 伪元素可以在元素的内容之后插入新内容，元素的内容可以指的是子元素，也可以是文本。

 伪元素的由两个冒号::开头，然后是伪元素的名称 ,使用两个冒号是为了区别伪类和伪元素。伪类时使用一个冒号,比如hover 

在IE8以下的旧版本是用单冒号:，来实现伪元素的写法的。

伪类是某个确切存在的元素的一种虚拟状态，或者说是一种特有的性质，这种状态或性质可以通过css捕捉到。 

举个栗子看看吧！！

**当鼠标悬停在某个元素上时，该元素出现蒙版，移开鼠标该元素的蒙版消失。**

<p id="test">678</p>

<div id="box">
    <p>123</p>
        123
    </div>

重点来啦！！

伪元素的用法：/* p元素使用伪元素 */

#test{
    font-size: 32px;
}
#test::before{
　　content: 'ewdwee';  添加的是文本ewdwee
    font-size: 20px;
    color: red;
}
#test::after{
    content: 'abc';  添加的是文本abc
    font-size: 20px;
    color: blue;
}

#box{
    margin: 20px auto 0;
    width: 300px;
    height: 300px;
    border: #000000 solid 1px;
    position: relative;  设置元素为相对定位，为后面蒙版的绝对定位做准备
    background: rgba(0,0,0,0.2);
}

/* 伪元素添加的内容属于行内元素的内容，可以是纯文本，也可以是容器 */
#box::before{
    content: '';  要伪元素起作用就必须添加的属性，即使为空，该属性也要存在，否则伪元素的设置不起作用
    width: 100%;
    height: 100%;
    background: skyblue;
    /* 块级元素,独占一行 */
    display: block;
    transform: scale(1,1);  插入的蒙版刚开始是纯在的，scale(1,1)指的是按照蒙版的宽和高的比例放大一倍
    transition: all 1s linear;  动画国度的变化、时间、方式
}
/* 伪元素上使用伪类,伪类之后的空格要去掉 */
/* 伪类要作用在HTML中存在的元素,伪元素不是HTML中确切存在的,故而伪类对他是不起作用的 */
#box:hover#box::before{
　　transform: scale(0,0);  鼠标悬停，蒙版消失
}

#box::after{
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: pink; 
    display: block;
}

若有不当之处，欢迎指出！！！