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添加对应链接的图标实例页面

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

使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
C++中虚函数工作原理和(虚)继承类的内存占用大小计算
转载请标明出处,原文地址:http://blog.csdn.net/hackbuteer1/article/details/7883531 一.虚函数的工作原理虚函数的实现要求对象携带额 ...
html中after伪类原理,css伪类before跟after原理与使用（原）
伪类before和after用于在被选元素的内容前面或后面插入内容. 请使用 content 属性来指定要插入的内容.(只能插入内容) 可以设置所插入内容的样式. 直接上代码: div {width: ...
html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
html css链接伪类大全,什么是css链接伪类？
什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...
Dubbo学习记录(八) -- Spring整合Dubbo中@Reference注解解析原理
Spring整合Dubbo中@Reference注解解析原理 @Reference: 可以用在属性或者方法, 意味着需要引用某个Dubbo服务, 那么Dubbo整合Spring后, 我很好奇怎么把这个 ...
html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
谈谈css中的伪类和伪元素,谈谈css中的伪类和伪元素
熟习前台的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法. css选择器 css选择除了我们常 ...

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

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

最新文章

热门文章