css中偽類:after的用法(三種方式)

2024-07-11 08:29:02

字體：大中小

供稿：網(wǎng)友

CSS中存在一些比較特殊的屬性，稱之為偽類，它們之中最常用的就是定義鏈接的偽:link，:visited，:hover，:active等。
除了它們，還有一些不被常使用的偽類，有:focus，:first-child，:lang等。

而且CSS里不光有偽類，還有偽元素，比如：:first-letter，:first-line，:before和:after。
本文中其它偽元素暫且不表，單說:after偽元素。
after顧名思義是在元素后面的意思，實(shí)質(zhì)是在元素之后添加內(nèi)容。
這個(gè)偽元素允許制作人員在元素內(nèi)容的最后面插入生成內(nèi)容，需要和content屬性一起使用，設(shè)置在對(duì)象后發(fā)生的內(nèi)容。默認(rèn)地，這個(gè)偽元素是inline行內(nèi)元素，不過可以使用屬性 display 改變這一點(diǎn)。
所有主流瀏覽器都支持 :after 偽元素，但對(duì)于IE來說，只有IE8以上版本支持。

下面舉個(gè)例子，在CSS代碼中插入：

復(fù)制代碼

代碼如下:
<style type="text/css">
h1:after {content:url(logo.gif)}
</style> <h1>標(biāo)題內(nèi)容</h1>

在顯示時(shí)，標(biāo)題內(nèi)容后會(huì)插入一張圖片。這就是偽元素:after的作用。
:after偽類的content還可以跟其它的參數(shù)，
一：字符串例如：

復(fù)制代碼

代碼如下:
<style type="text/css">
.test:after{content:"測(cè)試代碼"};
</style>
<div class="test">測(cè)試div：</div>運(yùn)行結(jié)果顯示為：測(cè)試div：測(cè)試代碼

二：attr(x)，attr是屬性的意思，顧名思義，就是讀取該類節(jié)點(diǎn)的屬性例如：

復(fù)制代碼

代碼如下:
<style type="text/css">
.test:after{content:attr(id)};
</style>
<div class="test" id="aaa">測(cè)試div的id為：</div>運(yùn)行結(jié)果顯示為：測(cè)試div的id為：aaa

三：固定參數(shù)
close-quote：插入 quotes 屬性的后標(biāo)記
no-close-quote ：并不插入 quotes 屬性的后標(biāo)記。但增加其嵌套級(jí)別
open-quote：插入 quotes 屬性的前標(biāo)記
no-open-quote：并不插入 quotes 屬性的前標(biāo)記。但減少其嵌套級(jí)別

上一篇：css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)

下一篇：用css3制作紙張效果(外翻卷角)