css之:after ::after

:after 的用法

CSS :after 伪元素(pseudo-element)（后面有解释） 定义

:after 伪元素在元素内容之后插入内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。 例子： 此样式会在每个 h1 元素之后播放一段声音：

h1:after{    content:url(beep.wav);}

这里有w3schools的例子吧 还有一个:after差不多的:before,就是在元素内容之前插入内容，内容当然就是content指出的内容如：文字，图片quirksmode提供的例子 浏览器IE6，7不支持:after伪类，详细的兼容性列表这里

:after 和::after的区别

element:after  { style properties }  /* CSS2 syntax */
element::after { style properties }  /* CSS3 syntax, not supported by IE8 */

见[:after

::after](https://developer.mozilla.org/en/CSS/:after)

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

一个冒号专门用来表示伪类，而伪元素用两个冒号来表示，以示区别,也就是一个是伪类，一个是伪元素。ie8仅支持:after。

Browser Lowest Version Support of

Internet Explorer 8.0 :after

Firefox (Gecko) 1.0 (1.0) :after

1.0 (1.5) :after | ::after

Opera 4.0 :after

7.0 :after | ::after

Safari (WebKit) 1.0 (85) :after | ::after

什么是伪类和伪元素

_伪类_可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。 _伪元素_所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。 伪类和伪元素都不出现在源文件和文档树中。伪元素在firebug下是查看不到的。 常见的伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang 伪元素有：:first-line，:first-letter，:before，:after