本篇内容主要讲解“css中:before的定义和用法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css中:before的定义和用法”吧!
:before 伪元素在元素之前添加内容。这个伪元素允许创作人员在元素内容的最前 面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
:before定义和用法
:before伪元素向选定的元素前插入内容。
:before伪元素生成包含放置在元素中的内容之前的生成内容的伪元素。
使用content属性来指定要插入的内容。
其中伪元素并不会真实的展现在dom中，它们并不是真正的元素，很多移动设备并不支持，所以在许多关键性的地方不建议使用伪元素。
浏览器支持情况
IE8+ (6与7弱爆炸了)
chrome2.0+
firefox 3.5+
:before的实例
此样式会在每个 h2 元素之前播放一段声音：
h2:before { content:url(beep.wav);}
CSS2 - :before 伪元素
before 伪元素可用于在某个元素之前插入某些内容。
:before 伪元素可以加入任意元素可以是文字、视频、图片等
下面的样式会在标题之前播放音频：
h2:before{ content:url(beep.wav);}
下面的样式会在标题之前加入content这个字符串，要注意 content需要用""引号包含起来.
h2:before{content:"content";}
下面的样式会在h2标题前面加入一张图片.
h2:before{content:url(XXX.jpg);}
CSS2 - :after 伪元素
after 伪类可用于在某个元素之后插入某些内容。
下面的样式会在标题之后播放音频：
h2:after{ content:url(beep.wav);}
到此，相信大家对“css中:before的定义和用法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
