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的定义和用法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！