标签：after color 元素 content 添加 css before

伪元素：利用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添加

标签：after,color,元素,content,添加,css,before
来源： https://www.cnblogs.com/yijieyufu/p/14969843.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。