You are here
CSS伪类:after的学习笔记（清除浮动）
可以看 http://www.w3school.com.cn/css/pr_pseudo_after.asp
http://www.w3school.com.cn/css/pr_pseudo_before.asp
http://www.w3school.com.cn/css/css_pseudo_elements.asp
CSS伪类:after的学习笔记（清除浮动）
http://hi.baidu.com/coxy
我测试过了，在IE6、IE7、Firefox 3下测试都通过，相看Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
ul{width:410px; border:1px solid red; list-style:none; padding:5px 5px 5px 0; margin:0;}
ul li {float:left; width:200px; border-bottom:1px solid #CCC;margin-left:5px;}
ul:after{content:''; display: block; height:0; clear:both; visibility:hidden;}
</style>
</head>
<body>
<ul>
<li>学习笔记</li>
<li>studynote</li>
<li>学习笔记</li>
<li>studynote</li>
<li>学习笔记</li>
<li>studynote</li>
<li>学习笔记</li>
<li>studynote</li>
</ul>
让我们的学习更轻松！
</body>
</html>
这里重要的两句我用粗体标注了，使用上比以前的在ＨＴＭＬ里加上一句<div style="clear:both;"></div>方便得多了，而且也不会有语意上的混乱。
这个方法无法继承就真是郁闷啊，刚开始我想的写法是这样的：
:after{content:''; display: block; height:0; clear:both; visibility:hidden;}
ul:after{}
但后来发现:after{}会对所有标签运用，所以没办法。
http://hi.baidu.com/coxy推荐文章:
来自 http://hi.baidu.com/rmpectsmkwmoqve/item/55e16cee30f2b83f4cdcaf60
来自 http://www.zhangxinxu.com/study/201009/after-content-clear-float.html 看清浮效果
CSS伪类对象 after和before的用法
IE对after、before是不支持的，请在firefox、opera、chrome下试调！
:before
语法：Selector : before { sRules }
说明：用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。
:after
语法：Selector : after { sRules }
说明：用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。
看以下这句定义的理解,也许你会更清楚一点...呵呵...
:after 伪元素在元素内容之后插入内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
after和before的用法的小例子
<style type="text/css">
div{border:1px solid #000000;}
.a:after {
content: "after后面";
color:red;
border:1px solid red;
}
.b:after {
content: "after后面";
color:red;
display:block;
border:1px solid red;
}
.c:before {
content: "before前面";
color:red;
border:1px solid red;
}
</style>
<div class="a">jianan8610</div>
<br><br>
<div class="b">jianan8610</div>
<br><br>
<div class="c">jianan8610</div>
<br><br>
-----------------------------------------------------------------------------------------------------------------------
用 :after 及 :before 伪元素一起使用，在对象前或后插入内容。
对应的脚本特性为 content
<style type="text/css">
a:after{content:"(link)";}
a:before{content:"链接";}
a.ss:after{content:"(linkss)";}
a.ss:before{content:"ss链接";}
</style>
<a href="http://hi.baidu.com/jianan8610">jianan8610</a>
<a href="http://hi.baidu.com/jianan8610" class="ss">jianan8610</a>
来自 http://hi.baidu.com/jianan8610/item/6be605db9b16a1332a35c7c3