css中:before的定义和用法

本篇内容主要讲解“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的定义和用法”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！