css :after伪类+content使用说明和方法

老白 10个月前 586浏览 0评论

首先,这段代码中的content: ".";有什么用,解决了什么问题,为什么要用他?

content属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

张鑫旭分享content:

content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。


CSS content内容生成最基本使用实例页面

css :after伪类+content使用说明和方法 CSS学习 第1张

再来一个content:attr()案例:

css :after伪类+content使用说明和方法 CSS学习 第2张

CSS content产生递增序号

css :after伪类+content使用说明和方法 CSS学习 第3张

CSS content为多语言内容插入对应字符实例页面

css :after伪类+content使用说明和方法 CSS学习 第4张

CSS content添加对应链接的图标实例页面

css :after伪类+content使用说明和方法 CSS学习 第5张


发表评论
展开