CSS中存在一些比較特殊的屬性,稱之為偽類,它們之中最常用的就是定義鏈接的偽:link,:visited,:hover,:active等。
除了它們,還有一些不被常使用的偽類,有:focus,:first-child,:lang等。
而且CSS里不光有偽類,還有偽元素,比如::first-letter,:first-line,:before和:after。
?本文中其它偽元素暫且不表,單說:after偽元素。
after顧名思義是在元素后面的意思,實質是在元素之后添加內容。
這個偽元素允許制作人員在元素內容的最后面插入生成內容,需要和content屬性一起使用,設置在對象后發生的內容。默認地,這個偽元素是inline行內元素,不過可以使用屬性 display 改變這一點。
所有主流瀏覽器都支持 :after 偽元素,但對於IE來說,只有IE8以上版本支持。
下面舉個例子,在CSS代碼中插入:
<style type="text/css">
h1:after {content:url(logo.gif)}
</style>
Html:
<h1>標題內容</h1>
在顯示時,標題內容后會插入一張圖片。這就是偽元素:after的作用。
偽元素:after另外一個常用的作用在原來的文章中曾經提到過,有些同學可能還記得,那就是清除浮動。
在CSS中加入帶有CSS偽類:after的內容:
.clear:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
然后在外面的Div容器box中引用這個class,比如:
<div id="box" class="clear">
……
……
</div>