如果你想在网页的某些文字前加图标或者想改变li元素默认的图标，你会如何做？常见的做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢量图标库）或者一张图标图片。
本文价绍一种不用再额外添加html标签，存粹利用css就能插入或者自作图标的方式。先了解伪元素：before和：after定义与语法
定义：在被选元素的内容前面（before）和后面（after）插入内容。语法：
p:before{ content:'内容'; } p:after{ content:'内容'; }
给li标签添加多样图标
li前的图标可以是圆形，方形，椭圆等，可以是空心实心，可以是黑色，绿色，蓝色。。。简单的几行代码就能实现：
li:before{ content:''; display:block; width:10px; height:10px; border-radius:10px;/**控制形状**/ backgroud:#000;/**控制图标颜色**/ margin-right:10px/**图标与文字距离**/ }
引入一张图片图标，对于特殊的图标，需要用图片完成的，同样可以before插入到页面中。
p:before{ content:url(iconf.png);/**不可以加“”**/ } 需要注意的是引入图片是content：后面不能用“”包起来，会被理解字符串做内容插入到页面中。
浏览器的兼容性
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- 几乎所有的移动浏览器。
资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com
可以看出几乎是针对高级浏览器的一种元素。如果还没有意识的摈弃ie8以下的开发者这类元素并不适合你。在未来随着低版本的浏览器占的市场份额越来越小，像这类的元素应用将越来越频繁，以提高开发效率。