:before和:after伪元素使用方法

文本内容：

日常开发中我们常常用到:before和:after伪元素在指定标签前和后增加内容，非常方便，例如：

p:before{
       content:'内容'；
}
 
p:before{
       content:'内容';
}

 如果是想利用:before和:after伪元素插入图标，我们可以用默认的字符图标或者引入图标库比如IconFont-阿里巴巴矢量图标库或者一张图标图片。

字符图标：

字符图标是计算机自带的图标，无需引入其他第三方文件，非常方便，但是有的用户计算机没有这个字符，就会显示成一个方框。

.example:before {
   content:'\00AB';
    …
}
.example:after {
   content:'\00BB';
    …
}

相关参考

• content字符图标大全分享

图标库：

图标库可以自定义，灵活很多，但是需要加载很多文件。

首先引入图标库，推荐使用阿里巴巴的Iconfont图标库，不会的看下面教程。

相关参考

• 阿里巴巴IconFont矢量字体图标库在线工具

@font-face {
    font-family: 'Iconfont';
    src: url('fonts/Iconfont.eot?7kkyc2');
    src: url('fonts/Iconfont.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/Iconfont.ttf?7kkyc2') format('truetype'),
        url('fonts/Iconfont.woff?7kkyc2') format('woff'),
        url('fonts/Iconfont.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

CSS中可以重复调用，不会可以看下面详细教程。

span {
    font-family: 'Iconfont';
    font-size: 100px;
    content:'\00BB';
}

相关参考

• 如何优雅的使用阿里巴巴IconFont字体图标(图文)

图片图标：

引入一张图片图标，对于特殊的图标，需要用图片完成的，同样可以before插入到页面中。

p:before{
content:url(iconf.png);/**不可以加“”**/
}

需要注意的是引入图片是content：后面不能用“”包起来，会被理解字符串做内容插入到页面中。