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

资料来源：网络整理时间：2023/3/4 0:56:51 共计：3626 浏览

首先，这段代码中的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添加对应链接的图标实例页面

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS小技巧：position:absolute以及float:left/right都可以使用元素变为display:inline-block（块状元素）_CSS学习 | ·下一条：修改输入框placeholder文字默认颜色-webkit-input-placeholder_CSS学习