怎样理解CSS3伪元素选择器？

1. 什么是伪元素选择器(::before和::after)?
　　从字面意思上来说，伪元素并不是一个真正的元素，它是一个假的元素，但是它们对用户是可见的，只能通过css来操作，在伪元素中如果没有“content”属性，伪元素是无效的，默认情况下插入的伪元素是内联元素，如果你给这个元素赋予了宽高，那么你就必须设置当前伪元素为块元素。
2. 之后或之前是什么？
　　我们的直觉可能是::before和::after伪元素可能是插入的内容会被注入到目标元素的前或后。但是，事实却不是这样的。注入的内容将会被插入到目标元素的子元素的前或后，但它会被插入到目标元素下的所有内容的“前”或“后”。如下图：

效果如图所示：

3. 插入非文本内容
　　首先，可以包含一个指向一个图像的URL，就像在css里包含一个背景图像。
注意不能使用引号，如果将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身，当然，也可以包含一个Data URI代替图像引用，正如使用css背景一样

还可以选择ATRR(X)中的函数的形式。根据规范“把X属性的值以字符串的形式返回”，看下面的例子：

上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URL的打印样式表。
4. 注意
　　唯一真正的问题是没有获得E6和IE7的支持。
　　大多数情况下，伪元素一般修饰（或者帮助）内容，不会给不支持的浏览器造成问题。所以，如果你的支持者具有较高的IE版本，你仍然可以在某种程度上使用它们。
　　伪元素不会出现在DOM中。这些元素不是真正的元素，因此，它们不是可用的。所以，不要使用伪元素生成内容，是网页的可用性和可访问性的关键。
　　另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容，如果使用了，伪元素会造成难以维护和调试缓慢。