html中after伪类原理,css :after伪类+content使用说明和方法

首先，这段代码中的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内容生成最基本使用实例页面：

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

CSS content产生递增序号

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

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