CSS,中header 后面的after什么意思?

发布网友发布时间：2022-04-20 22:58

共2个回答

热心网友时间：2022-04-21 00:27

CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等。

除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。

而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。

本文中其它伪元素暂且不表，单说:after伪元素。

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。

所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。
-----------------------------------

你那段代码是用来清除浮动的。
以下代码可以这么解释：
.header:after { <----在类名为“header”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
这里补充一个属性是{ *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

热心网友时间：2022-04-21 01:45

:after 伪元素在元素之后添加内容。
　　这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

此样式会在每个 h1 元素之后播放一段声音：
　　h1:after { content:url(beep.wav);}

参考资料：w3cschool