css中偽類和偽元素之 after

2021-08-19 09:41:59 字數 1128 閱讀 4471

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**中插入: 

**如下:

在顯示時,標題內容後會插入一張。這就是偽元素:after的作用。

:after偽類的content還可以跟其它的引數,

一:字串例如:

**如下:

測試div:

執行結果顯示為:測試div:測試** 

二:attr(x),attr是屬性的意思,顧名思義,就是讀取該類節點的屬性 例如:

**如下:

測試div的id為:

執行結果顯示為:測試div的id為:aaa

三:固定引數

close-quote:插入 quotes 屬性的後標記

no-close-quote :並不插入 quotes 屬性的後標記。但增加其巢狀級別

open-quote:插入 quotes 屬性的前標記

no-open-quote:並不插入 quotes 屬性的前標記。但減少其巢狀級別 

css中偽類和偽元素

偽類和偽元素時對那些我們不能通過class id等選擇元素的補充 偽類的操作物件是文件樹中已有的元素 可以給已有元素加了乙個類替代 而偽元素則建立了乙個文件數外的元素 可以新增乙個新元素替代 css3規範中要求使用雙冒號 表示偽元素,以此來區分偽元素和偽類。偽類 this is a text em ...

css偽類和偽元素

css偽類用於向某些選擇器新增特殊的效果。link,visited,hover,focus,active,first child,lang css3新增的偽類 last child,only child,first of type,last of type,only of type,nth chil...

CSS偽類和偽元素

css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說,偽類和偽元素是用來修飾不在文件樹中的部分,比如,一句話中的第乙個字母,或是列表中的第乙個元素,又或者是滑鼠懸停在某個超連結上時要設定的樣式。常見的狀態偽類主要包括 link 應用於未被訪問過的鏈結 hover 應用於滑鼠懸停到的元素 ...