如果你有一直密切关注各个关于网页设计的博客，你大概会注意到，:before和:after伪元素已经在前端开发界得到越来越多的关注，并且是有很好的理由。特别是，有个博主（位于伦敦的一位开发者Nicolas Gallagher ），他对伪元素的应用尝试，给伪元素带来震撼的曝光机会。
这84个GUI图标是用伪元素和语义化的HTML创建的。查看demo
为了补充和加强本次的曝光(并利用发展趋势带来的好处)，我整理了一份自认为比较完整的关于伪元素的“前世今生”。本文针对那些见识过伪元素一些应用的酷炫效果，想自己尝试做，但是要先了解这门CSS技术的读者。
虽然CSS规则包括其它的伪元素，但是在本文，当我提到伪元素的时候，我特别指的是:before和:after这两个。
伪元素是做什么的？
伪元素所做的就像它的字面意思一样，它创造一个虚假的元素，并把它插到目标元素里面内容的之前和之后。
基本语法
:before和:after伪元素的代码很容易编写，这是个例子：
|
1
2 3 4 5 6 7 |
#example:before {
content: "#"; } #example:after { content: "."; } |
关于这个例子，要注意两点。
第一，我们同时用:before和:after对同样的目标元素起作用。如它们都作用于id为example的元素上。
第二，如果没有content属性（它是生成内容模型所定义的一部分），伪元素是无效的。也就是，如果要使用伪元素选择器来定义，那么就需要有content属性，否则你加任何其它的样式属性都是无意义的。
在这个例子里，将会有伪内容，显示于id为example的元素的内容之前或/和之后。
关于这个语法，要强调几点。
可以给content属性留空，创建一个“零内容”的盒子。如下：
|
1
2 3 4 5 6 |
#example:before {
content: ""; display: block; width: 100px; height: 100px; } |
但是，content这个标签是不能被移除的，否则，伪元素就不起作用了。这个“零内容”，需要给content属性一个空内容的双引号。
你也许会注意到，:before和:after也可以写为::before和::after，其实这两者没有什么区别，只是用在CSS3中来区分伪类（单冒号）和伪元素（双冒号）。
最后一点要说明的是，你可以应用一个伪元素，没有作用于任何的目标元素。如下：
|
1
2 3 |
:before {
content: "#"; } |
这个是有效的写法，但是一点用处也没有。
插入内容有什么特性？
如上描述，插入的内容在页面的源代码是看不到的。它只在CSS里面可见。
同样，插入的内容默认的是一个内联（inline）元素。所以，要给插入元素一个height\padding\Margin等，需要先给元素定义为块状（block级）的元素。
以下就开始简单描述如何定义伪元素。
styles-pseudo-elements
在这个例子里面，我对应用到插入元素的样式进行了高亮。伪元素就是这样的独特，即是可以在同样的声明块中同时定义插入内容和样式。
另外，要知道的一点是，CSS的继承规则同样适用于插入元素。比如应用在body里面的字体、字体大小等这些样式，插入元素和其它元素一样，会继承这样的样式。
同样，和其他元素一样，伪元素不继承父级如padding\margin这样的属性。
插入在什么之前和之后？
你或许会迷惑，插入元素是插入到哪里？你一看到:before和:after或许会认为就是在其所作用的目标元素的之前或之后。然而，事实并不是这样。
要插入的内容，会被放置于目标元素的里面，作为它的一个子元素，并且它会显示在目标元素里面内容的之前或之后。
要理解这点，看看这个代码：
|
1
2 |
<p class=box>Other content.
</p> |
样式：
|
1
2 3 4 5 6 7 8 9 10 11 |
p.box {
width: 300px; border: solid 1px white; padding: 20px; } p.box:before { content: "#"; border: solid 1px white; padding: 2px; margin: 0 10px 0 0; } |
在HTML里面，你所看到的是个段落（p），这个p有个class为box，其里面的内容是“other content”（就像你会在html的源代码里面所看到的）。在CSS里面，这个p被定义样式有width\padding\border。
然后，再看看伪元素的定义。在这个例子里面，这个插入内容是放到到段落（p）里面的内容之前的。被定义的样式有border\padding\margin。
看看这个图就明白了。
Before Or After What?
外框是段落，内容插到段落里面内容的前面而不是到段落的前面。
插入非文本的内容
我之前提过可以给content属性设为空字符，或者一个文本内容。其实你还有其它的两种选择，就是给它加特定的内容，如下：
第一，可以包含一个URL指向一个图片，在这里，你可以定义一个Data URI，就像你想定义一个背景图片一样。
|
1
2 3 |
p:before {
content: url(image.jpg); } |
第二，你还有另外一个选择就是加上attr(x)这种形式的函数。根据定义，这个函数为选择器对象返回一个由属性X的值生成的字符串
|
1
2 3 |
a:after {
content: attr(href); } |
attr()函数取得所定义的属性的值，并把它作为文本变成可以插入的伪内容。
浏览器支持情况
像对待其它的一些前端技术一样，开发者们关注的重点之一就是浏览器支持啦。在这点上，看似问题还没那么大。:before和:after的浏览器支持情况如下：
Chrome 2+,
Firefox 3.5+ (3.0有部分支持),
Safari 1.3+,
Opera 9.2+,
IE8+ (尚有些小bug),
大部分的移动设备浏览器。
这里唯一真正的问题（毫无疑问）就是完全不支持的IE6和IE7。所以，如果你的目标用户是网页开发者群（或者其它较少使用IE浏览器的群体），那么你就大胆用吧。
另外，说到伪元素的安全性，幸运的是，缺乏一个伪元素并不会引发什么功能上的问题。伪元素大多数是用来生成修饰性的内容，在不支持伪元素的浏览器里面，不会引发重大问题。所以，如果你的目标群体是IE浏览器使用者占大多数的，在某个程度上，你依然可以使用这个属性。
几个提醒
如前面所述，伪元素的内容不会在DOM结构中显示。这些元素不是真正的元素。它们在大多数的辅助设备中是不可访问的。所以对网页的使用性和可用性很关键的内容，要尽量避免使用伪元素来生成。
另外，像Firebug这样的开发者工具，并不会显示由伪元素生成的内容。所以，如果滥用伪元素，会引发网页调试过程效率低下和网页维护不方便等问题。
（[更新]在评论里提及的两点：你可以使用chrome的开发者工具来查看关于伪元素的样式，但这个元素不显示在DOM里面。还有一点，Firebug1.8已经添加了对伪元素的支持。）