------------------------------------------------------------------------------------------------------------------------------------
伪类 VS 伪元素
这两个概念很容易混淆，即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单，如下：
伪类：作用对象是整个元素
首先，来看几个伪类
a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444} 如你所见，尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。
伪元素：作用于元素的一部分
还是来看几个例子：
p::first-line {color: #555}p::first-letter {color: #666}a::before {content : "hello world";} 如你所见，伪元素作用于元素的一部分：一个段落的第一行 或者 第一个字母。
更加神奇的是可以作用于并未加入HTML的对象，这就是:before 和 :after，也就是本文要说的内容。
:before VS ::before
为什么有两种写法呢？它们的效果一样么？
答案是一样的，来看一个例子：
/*CSS2*/.example:before {}.example:after {}.example:first-child {} /*CSS3*/.example::before {}.example::after {}.example::first-child {}
在CSS2中，我们使用一个冒号表示伪类和伪元素。然而，为了区别已有的这两个，CSS3专门为伪元素设计了两个冒号。
IE再次毁了一切
所有现代浏览器都支持 :: 语法，但是悲剧的IE8不支持，大多数开发者为了兼容IE，使用CSS2的 :。为了保持简单一致，本文后面的部分都是用CSS2格式。
什么是 :before 和 :after
:before 和 :after 使你可以通过CSS加入一些内容，从而避免了HTML的凌乱。特别是一些装饰性的元素，从语义化考虑本就不该出现在HTML中。
举个例子，你的网站有一些电话号码，你希望在它们前面加一个icon ?。你可以用 :before 伪元素实现这个效果：
.phoneNumber:before { content: "?"; font-size: 15px;} 这段代码使得.phoneNumber的所有元素的前面插入了一个icon。:after 作用一样，你可以猜到会出现什么效果了
.phoneNumber:after { content: "$#9742"; font-size: 15px;} 一个简洁的例子
最近，:before 和 :after 变得非常流行的一个原因是它们可以增加纯CSS设计的复杂度。不需要多余的标签，我们可以使用伪元素添加额外的可样式化的元素或层级。
来看一个例子，这是一个简单的按钮，圆形并有红色的渐变。
.button {
height : 100px ;
width : 100px ;
position : relative ;
margin : 50px ;
color : white ;
text-align : center ;
line-height : 100px ;
/*Rounded Corners and Shadows*/
-webkit-border-radius: 100px ;
-moz-border-radius: 100px ;
border-radius: 100px ;
-webkit-box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 );
-moz-box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 );
box-shadow: 2px 2px 4px rgba( 0 , 0 , 0 , 0.4 );
/*Ridiculous Gradient Syntax*/
background : #e51d16 ; /* Old browsers */
background : -moz-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* FF3.6+ */
background : -webkit-gradient(linear, left top , left bottom , color-stop( 0% , #e51d16 ), color-stop( 100% , #b21203 )); /* Chrome,Safari4+ */
background : -webkit-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* Chrome10+,Safari5.1+ */
background : -o-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* Opera 11.10+ */
background : -ms-linear-gradient( top , #e51d16 0% , #b21203 100% ); /* IE10+ */
background : linear-gradient( top , #e51d16 0% , #b21203 100% ); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#e51d16' , endColorstr= '#b21203' ,GradientType= 0 ); /* IE6-9 */
}
效果如下：
现在，我们需要在按钮的外围添加一层稍暗的区域，并且给它一个内阴影效果，看起来就像是嵌入的一样。这次，我们不用添加额外的标签，只需要用一个空的伪元素。
.button:before { content:"";} 现在我们开始实现想要的效果。
.button:before { content:""; width: 100%; height: 100%; display: block; z-index: -1; position: relative; padding: 15px; background: #ddd; left: -15px; top: -15px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4); -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);} 现在按钮看起来更立体了。 :before 实现了外围的圆环。我们把z-index设置为-1，使它位于按钮的下方，并且使用相对定位校正位置。
接下来，我们又想加一层同样的效果。这一次，我们使用 :after
.button:after { content:""; width: 100%; height: 100%; display: block; z-index: -2; position: relative; padding: 25px; background: #eee; position: absolute; left: -25px; top: -25px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4); -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);} 效果如下：
通过 :before 和 :after 你还能做什么？
使用很广泛，下面给出几个比较流行的例子
清除浮动
CSS的浮动很让人头痛，世界各地的开发者都在寻找更好的解决方法。
Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个，即利用 :before 和 :after 清除浮动。
/* For modern browsers */.cf:before,.cf:after { content:""; display:table;} .cf:after { clear:both;} /* For IE 6/7 (trigger hasLayout) */.cf { zoom:1;} 这里 :before 阻止了 top-margin 合并， :after则用于清除浮动，这种方法做的极为干净漂亮。
你也许会说还有 overflow: hidden; 方式呢！当然这也是一种可选方案，当你发现overflow不合适的时候，可以选择这里提到的方式。
CSS图形
使用纯CSS实现某些复杂的图形是不是很有趣？通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。
CSS3Shapes.com 有很多例子，这里就举一个八边形的例子。
#octagon { width: 100px; height: 100px; background: blue;} #octagon:before { height: 0; width: 40px; content:""; position: absolute; border-bottom: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; } #octagon:after { height: 0; width: 40px; content:""; position: absolute; border-top: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; margin: 70px 0 0 0;} 可以看到，通过定位、设置border，我们就能把一些简单的形状组合成复杂的图形，相当的酷！