:before 伪元素在元素之前添加内容。这个伪元素允许创作人员在元素内容的最前 面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
:before定义和用法
:before伪元素向选定的元素前插入内容。
:before伪元素生成包含放置在元素中的内容之前的生成内容的伪元素。
使用content属性来指定要插入的内容。
其中伪元素并不会真实的展现在dom中，它们并不是真正的元素，很多移动设备并不支持，所以在许多关键性的地方不建议使用伪元素。
浏览器支持情况
IE8+ (6与7弱爆炸了)
chrome2.0+
firefox 3.5+
:before的实例
此样式会在每个 h1 元素之前播放一段声音：
h1:before { content:url(beep.wav);}
CSS2 - :before 伪元素
before 伪元素可用于在某个元素之前插入某些内容。
:before 伪元素可以加入任意元素可以是文字、视频、图片等
下面的样式会在标题之前播放音频：
h1:before{ content:url(beep.wav);}
下面的样式会在标题之前加入content这个字符串，要注意 content需要用""引号包含起来.
h1:before{content:"content";}
下面的样式会在h1标题前面加入一张图片.
h1:before{content:url(XXX.jpg);}
CSS2 - :after 伪元素
after 伪类可用于在某个元素之后插入某些内容。
下面的样式会在标题之后播放音频：
h1:after{ content:url(beep.wav);}
总之，css中 before给大家简单的介绍了一些，希望大家多看看。