伪元素：利用css给一个标签创建出来的子级元素，该元素在页面中真实存在，但是在html中并不存在。

- 伪元素定义参考链接：

https://www.w3school.com.cn/css/css_pseudo_elements.asp

 

（1）before：

往指定的标签的内部的 前端 添加内容

（2）after：

  往指定的标签的内部的 后端 添加内容

注意：before和after都需要利用content添加内容，所有的样式针对该内容进行设置

 1   .box {
 2             color: red;
 3         }
 4         
 5         .box::before {
 6             color: salmon;
 7             content: "测试前";
　　　　　　　　　content: url(https://hbimg.huabanimg.com/b87d1870aefdb2082e8f58215969852ae8ff2efb603d9-OZ6tXN_fw658/format/webp);

 8       }
 9         
10         .box::after {
11             color: royalblue;
12             content: "测试后";
13         }
14 <div calss='box'><div>

 

我们也可以用图像替换内容

（4）添加图标（http://fontawesome.dashgame.com/）

-借助一些现有的图标库，通过content添加