利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标，你会如何做？常见的做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢量图标库）或者一张图标图片。

本文价绍一种不用再额外添加html标签，存粹利用css就能插入或者自作图标的方式。先了解伪元素：before和：after定义与语法

定义：在被选元素的内容前面（before）和后面（after）插入内容。语法：

p:before{

      content:'内容';

}

p:after{

      content:'内容';

}

给li标签添加多样图标资源网站大全 https://55wd.com我的007办公资源网站 https://www.wode007.com

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),

几乎所有的移动浏览器。

可以看出几乎是针对高级浏览器的一种元素。如果还没有意识的摈弃ie8以下的开发者这类元素并不适合你。在未来随着低版本的浏览器占的市场份额越来越小，像这类的元素应用将越来越频繁，以提高开发效率。