:before 选择器在被选元素的内容前面插入内容。
定义中提到，是在被选元素的 内容 前面插入内容，如下图，div 是一个容器，div 中的内容是 testDiv元素 ，css 中的 :before 和 after 都显示在 div 内部，二者分别位于 testDiv元素 内容的前后。
所以可以看到，伪元素也是被选元素的内容，只是会插入到被选元素原本内容的前后。
插入的伪元素默认是 display 属性，如果想要为伪元素设置宽高等，需要修改伪元素的 display 属性为 inline-block 或者 block 。
伪元素插入的位置是被选元素的 内容 的前或者后，因此本质上伪元素也是被选元素的子元素。所以定位时，被选元素就是伪元素的父元素。
如图，被选元素 test-div 设置了 position: relative ，外部元素 test-wrapper 也设置了 position: relative ，然后对被选元素的伪元素 :after 设置定位，可以看到，伪元素的位置是根据 test-div 来定位的，因此，可以验证 被选元素就是伪元素的父元素 这句话。
:after 伪元素在元素之后添加内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。
h1:after
{
content:url(beep.wav)
}
此样式会在每个 h1 元素之后播放一段声音：
<style type="text/css">
h1:after {content:url(/i/w3school_logo_white.gif)}
</style>
<h1>This is a heading</h1>
这是在h1后面插入一张图片，但IE
