利⽤伪元素：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),
⼏乎所有的移动浏览器。
可以看出⼏乎是针对⾼级浏览器的⼀种元素。如果还没有意识的摈弃ie8以下的开发者这类元素并不适合你。在未来随着低版本的浏览器占的市场份额越来越⼩，像这类的元素应⽤将越来越频繁，以提⾼开发效率。
>icon图标库

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。