css中偽類與偽元素之:after

這篇文章主要介紹了關於css中偽類和偽元素之:after ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

CSS中存在一些比較特殊的屬性，稱之為偽類,它們之中最常用的就是定義鏈接的偽:link，:visited，:hover，:active等本文詳細介紹一下after的用法的用法，感有興趣的朋友可以了解下，或許對你有幫助

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> <h1>标题内容</h1>

#在顯示時，標題內容後會插入一張圖片。這就是偽元素:after的作用。
:after偽類別的content還可以跟其它的參數，

一：字串 例如： 

程式碼如下:

<style type="text/css"> 
.test:after{content:"测试代码"}; 
</style> 
<p class="test">测试p：</p>
运行结果显示为：
测试p：测试代码

#二：attr(x )
，attr是屬性的意思，顧名思義，就是讀取該類別節點的屬性例如： 

程式碼如下:

<style type="text/css"> 
.test:after{content:attr(id)}; 
</style> 
<p class="test" id="aaa">测试p的id为：</p>运行结果显示为：测试p的id为：aaa

三：固定參數 close-quote：插入quotes 屬性的後標記
no-close-quote ：並不插入quotes 屬性的後標記。但增加其嵌套層級
open-quote：插入 quotes 屬性的前標記
no-open-quote：並不插入 quotes 屬性的前標記。但減少其嵌套層級 

相關建議：

CSS中可繼承的屬性

##

以上是css中偽類與偽元素之:after的詳細內容。更多資訊請關注PHP中文網其他相關文章！