订阅
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 */
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