前言：这篇文章会继续之前的卡其漫画的页面效果，主要说明css3中的伪元素的使用及字体图标的使用
我们应该还记得，在上一篇文章中，我们实现一个精灵图背景样式的效果
这个效果我们是对一个标签添加相应的样式：
<li>
<a href="#" class="clearfix">
<img src="./images/lhsl_199x259.jpg" alt="">
<p>灵魂撕裂</p> <span class="newone"></span>
</a>
</li>
------------------css---------------------------
.newone{
width: 30px;
height: 30px;
float: left;
box-sizing: border-box;
background-image: url('../images/newicon_20160225.png');
background-size: 75px 150px;
background-position: -60px -114px;
padding: 7px;
background-clip: content-box;
background-origin: content-box;
}其实在以后的页面制作过程中，类似这样的效果我们还有一种更好的方式：使用伪元素
那我们就有必要先来学习伪元素了。什么是伪元素呢？
说到伪元素，首先我们得先了解一下伪类。我们之前都使用过a:link,a:hover,a:active,a:visited,这些都是关于超链接样式方面比较常用的伪类了。css伪类侧重于向某些选择器添加样式效果。它在使用的时候直观感受上与普通的css类相很类似，就是可以为已有的元素添加样式，但是他主要是用于元素对应的dom树无法描述的状态下为页面中的元素添加样式。什么是元素对应的dom树无法描述的状态？举个例子，我们添加了一个超链接，当鼠标上移的时候，我们并没有添加新的元素，但是我们却需要元素有一个新的样式，这个新样式在dom树中怎么描述呢？无法描述，那么这个时候伪类就出马了，它可以为这种状态下的元素设置一个单独的样式，所以它称为伪类。
我们在这篇文章中不再详细讲伪类，我们要讲与伪类比较像的伪元素！！
伪元素用于创建一些不存在于文档树中的元素，并且可以为他添加样式，简单说，我们相当于可以使用伪元素来新增一个元素，并且可以对这个元素设置我们想要的样式。举个例子，我们可以使用伪元素在一个元素后面增加一个新的结构，并且为这个结构添加想要的样式，这样，虽然这个新增元素在dom树中不存在 ，但是用户却可以看到它。意味着我们可以在页面中产生想要的效果，但是却可以节省解析dom树的时间，这真是意义重大啊！！呀，等等，这不就是我们想要实现的效果吗？从页面结构中看到，我们之前是添加一个dom树中真正存在的元素，并为这个元素添加样式来实现我们想要的图标效果的：<span class="newone"></span>，有了伪元素，好像现在我们不必要这么做了哦，那还犹豫什么，开始来学习如何使用伪元素来实现相同的效果吧！！
首先我们来看一下使用伪元素的基本语法 ：
dom::after {
content:'';
// 其它样式
}dom是我们想添加伪元素的页面元素，::after是众多伪元素中的一种(我们这篇文件主要是说明::after和::before),我们可以看到，伪元素使用::做为标识迪点和伪类稍有不同，在伪元素的样式中，我只添加一个属性content，这个属性是必需的，如果没有添加那么伪元素将不会被解析，这点很重要。伪元素的content属性，它可以直接的设置一个字符串作为伪元素的内容，也可以使用unicode字符集(采用4位16进制编码)，而且它还具备一定限度的编程能力，如 :
dom::after {
content:'普通字符串';// 指定普通字符串
content:'\e9e2'; // 指定unicode字符集
content: attr(元素的html属性名称); // 获取元素的相关属性
// 其它样式
}这里还有一个需要注意的地方，伪元素默认是行级元素，如果你需要伪元素产生宽高等属性，那么必须将其设置为块级元素。
针对于我们的需求，我们使用伪元素实现漫画名称(p元素)后图标的添加。这是p元素先前的样式：
p{
line-height: 30px;
text-indent: 5px;
font-size: 16px;
// 让p元素的宽度随着文本内容变化
display: inline-block;
color: #4c4c4c;
// 现在后面已经不再添加span元素了，所以也就不用再添加float样式了
/* float: left; */
// 子绝父相：伪元素相当于它的子元素，伪元素中使用了绝对定位，那么p元素做为父元素就应该相对定位了
position:relative;
}然后为其添加伪元素：
p::before{
// 必须设置content,如果没有内容，也需要添加这个属性，只是内容为‘’
content: '';
width: 30px;
height: 30px;
box-sizing: border-box;
// 伪元素默认是行级元素，所以这里需要它的宽高，所以需要设置其为块级元素，同时为了保证它能出现在我们
想要的位置，故而为其添加定位属性
position: absolute;
// 设置合适的位置
right:-25px;
top:0;
// 设置背景
background-image: url('../images/newicon_20160225.png');
background-size: 75px 150px;
padding: 7px;
background-position: -60px -114px;
background-origin: content-box;
background-clip: content-box;
}从上图中可以看到，dom中已经没有之前的span结构了取而代之的是一个伪元素相识::before，但是页面中依然可以看到我们想要的效果，而这一切就是伪元素的功劳了。顺便说一下，::after的使用和::before没有本质的区别，不信你也可以使用::after再试一次。
学习完伪元素的基本使用之后，我们再来关注另外一个页面中的效果：
没错，我要说的就是这个“我要投稿”前面的小图图。有小伙伴可能会说了，这有什么好说的，直接加个图片不就得了，哦，用精灵图，对吧，完美！！可是，我说可是：如果我想要这个图再小一点点，或者说修改一下颜色，这需求简单吧，那如果是图片我怎么办呢？嗯，只能修改源素材了，打开ps,操作一波，但是如果到时候还需要修改呢？难道每次修改都重新来修改素材？这显示不现实，所以，在这样的场景，我们一般都会选择更好的方式来实现，这种方式就是字体图标。
什么是字体图标呢？字体图标简单的说，就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样。注意，这句话的重点内容是它是一种特殊的字体，简单说，它就是字体，字体图标最大的好处，在于它不会变形和加载速度快。字体图标可以像文字一样，随意通过CSS来控制它的大小和颜色，对于建网站来说，非常方便(重点：要考的)！
那字体图标这么好用，我们怎么样才能得到我们想要的图标呢？一般来说有两种方式比较常见，自己制作和找网站下载。自己制作还需要学习一些其它的矢量图软件，算了，我们还是找一些靠谱的网站下载吧。这里我以icomoon.io/为例(为什么以它为例，因为它里面的图标看上去比较大气)，下面我们就开启字体图标使用之旅吧！
1.打开icomoon.io/网站，选择右上角的 IcoMoon App
2.选择你想要的图标，然后生成字体
3.下载字体文件
4.下载之后，是一个zip压缩包，不要犹豫，解压：
我们来重点说下fonts文件夹中的内容，一般这个文件夹里面会包含着四个不同类型的文件：
这几种文件代表着目前最主要的几种网络字体(web font)格式，这些格式都可以用来描述我们需要使用的字体图标，我们现在只需要对这几种格式有一个大致的了解
EOT:eot是嵌入式字体，是微软开发的技术，允许onetype字体用@font-face嵌入到网页
SVG:SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体
TTF:TTF（TrueTypeFont）是Apple公司和Microsoft公司共同推出的字体文件格式，随着windows的流行，已经变
成最常用的一种字体文件表示方式
WOFF:Web开放字体格式（Web Open Font Format，简称WOFF）是一种网页所采用的字体格式标准。此字体格式
发展于2009年，现在正由万维网联盟的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效
利用压缩来减少档案大小，并且不包含加密也不受DRM（数位著作权管理）限制我们可以这样认为，提供了这几种类型的字体文件，在不同浏览器上都能正确的显示我们所使用的图标。
我们再来关注一下style.css文件的内容，这个文件已经创建好了使用图标的样式，我们只需要进行调用就行了。关键代码：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?yom1l9');
src: url('fonts/icomoon.eot?yom1l9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?yom1l9') format('truetype'),
url('fonts/icomoon.woff?yom1l9') format('woff'),
url('fonts/icomoon.svg?yom1l9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}上面这段代码中定义了当前图标的字体(font-family: 'icomoon';),指定了字体资源文件的路径，这个路径绝对不能错误，如果错误了就找不到字体资源，谈何使用图标呢？
经过了前面的准备和说明，下面我们开始来享受成果了。那如何使用字体图标呢，分为两步：指定字体，指定这个字体中的图标。在icomoon的Style.css文件中，它帮我们进行了简化处理：
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}这个样式很明显就是添加了一个属性选择器，为所有以icon-开关的样式都指定了字体，这样我们在使用的时候，就只需要使用里面定义的图标样式了：
/* style.js中提供的样式 */
.icon-phone:before {
content: "\e942";
}
.icon-airplane:before {
content: "\e9af";
}
.icon-upload2:before {
content: "\e9c6";
}.icon-upload2就是我们在卡其漫画中需要使用的样式，这里使用到了伪类，在设置content的时候使用到了unicode编码，它可以直接找到文件中对应的结构解析为图标。于是我们可以添加以下代码：
<div class="upload fr">
<!-- 使用字体图标中的样式 -->
<span class="icon-upload2"></span>
<span>我要投稿</span>
</div>打开页面，就能看到如下效果了：
感觉图标有点小...我们可以像操作字体一样来操作字体图标，所以我们可以为字体图标添加与字体相同的样式。比如我们希望图标能够大一些，同时添加些许的阴影，或者修改一下颜色，那这些操作就太简单了：
.icon-upload2{
font-size: 25px;
text-shadow: 1px 1px 3px blue;
color: #fff;
}想怎么设置就能怎么设置，你有没有感觉 比图片方便多了？
好了，到这个时候了，我们这篇文章也差不多讲完了伪元素和字体图标的使用了。我们介绍了这两个知识点在卡其漫画中的使用，它能让我们在制作 的时候多一个选择，并且在制作一些效果的时候更合理。小伙伴们，还犹豫什么，快快打开你的电脑，实现卡其漫画的效果吧。
