解析CSS中的伪元素及其与伪类的区别

伪元素
我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览器这里使用单冒号）。但是content的可取值有哪些呢？
1. 字符串： content: “a string”- 注意：特殊字符必须使用unicode编码；
2. 图片： content: url(/path/to/benjamin.png) – 图片以原始尺寸插入，不能调整大小。因图片支持渐变，因此可以对伪元素使用渐变效果；
3. 无字符： content: “”- 这个在清除浮动和设置背景图片比较有用，我们可以设置背景图片的width和height，甚至我们可以使用background-size属性来调整背景图片大小；
4. 计数器： content: counter(li)- 在:marker出现之前，对于设置列表序号样式比较有用；具体参见下面代码：

1. ol {   
2.     countercounter-reset: li;   
3. }   
4. ol>li {   
5.     position: relative;   
6.     padding-left: 2em;   
7.     line-height: 30px;   
8.     list-style: none;   
9. }   
10. ol>li:before {   
11.     position: absolute;   
12.     top: 8px;   
13.     left: 0;   
14.     height: 16px;   
15.     width: 16px;   
16.     line-height: 16px;   
17.     text-align: center;   
18.     content: counter(li);   
19.     countercounter-increment: li;   
20.     border-radius: 50%;   
21.     background-color: #ccc;   
22.     font-size: 12px;   
23.     color: #efefee;   
24. }  

PS：我们不能设置content: “<h2>Benjamin</h2>”，它不会解析按HTML代码片段解析，而会解析为字符串；
5. content: attr(attrName)
content可以利用attr函数获取属性值，尤其使用在伪类中比较方便。见如下代码：

1. <style type="text/css">   
2.     .list li {   
3.         list-style: none;   
4.         margin-bottom: 20px;   
5.     }   
6.     .list li span {   
7.         vertical-align: middle;   
8.     }   
9.     .list li:before {   
10.         content: attr(data-index);   
11.         display: inline-block;   
12.         width: 20px;   
13.         height: 20px;   
14.         text-align: center;   
15.         color: #fff;   
16.         vertical-align: middle;           
17.         background-color: #f00;   
18.         border-radius: 50%;