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

如果你想在网页的某些文字前加图标或者想改变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以下的开发者这类元素并不适合你。在未来随着低版本的浏览器占的市场份额越来越小，像这类的元素应用将越来越频繁，以提高开发效率。