快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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


文章标题:css中:before的定义和用法-创新互联
地址分享:http://6mz.cn/article/dhiscg.html

其他资讯