CSS3伪元素选择器

CSS3伪元素选择器
CSS3伪元素选择器有两种：分别是::before和::after，下面我们分别进行介绍
先介绍一下使用的注意事项：
1.他们本身就是一个元素（盒子），使用的时候相当于是在原先的div所创建的盒子里增加新的“小盒子”。可以定义其属性但是默认的只是行内元素。
2.before和after所代表的盒子必须具有content属性
3.before表示在所给定的内容之前，after表示在所给的内容之后；这里的内容是指原先的div盒子里给定的content里的内容。
4.在dome里面是看不见所创建的before和after元素的 ，所以称其为伪元素
5.伪元素和标签选择器一样，权重为1

接下来，我们举例讲解一下，首先给一个div盒子作为研究对象，举例代码如下：

 <div>爱</div>

假设我们想在"爱"这个字前面加上一个元素，并且里面写上"我"这个字，可以使用上面介绍的为元素选择器::before，举例代码如下：

div::before {
            content: "我";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }

备注：以上代码中的 display: inline-block;是融合行内于块级，让其变成不独占一行的块级元素，在这里是为了展示div“大盒子”里用伪元素选择器做出来的“小盒子”的内容位置和包含关系。（关于display: inline-block;的说明，我会在后面其他博客中进行详细讲解）。

假设我们想在"爱"这个字后面加上一个元素，并且里面写上"中国"，可以使用上面介绍的为元素选择器::after，举例代码如下：

 div::after {
            content: "小猪佩奇";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }

display: inline-block;的功能同上。
最后得到的结构布局如下图所示：