么是偽元素

讓我們先看看W3的偽元素官方定義：

偽元素用來創建HTML文檔語言指定之外文檔樹的抽象層。比如HTML沒有提供文檔元素內容的首字母或第一行的訪問機制。CSS偽元素允許作者引用這些除此之外無法訪問的信息。偽元素還提供一種方法來引用不存在于文檔中的內容。（比如，::before 和 ::after ）。

一個偽元素由2個冒號（::）加上偽元素的名字所定義。

:: 標記是CSS2.1新規范中引入的，用來區分偽類（pseudo-classes）和偽元素（pseudo-elements）。但出于現有樣式表兼容性原因，用戶代理必須也能支持CSS1和CSS2中引入的單冒號偽元素標記（也就是說，:first-line, :first-letter, :before 和 :after）。但是CSS2.1及以后版本新引入的偽元素不支持這種兼容語法。

每個選擇器中只能出現一個偽元素，并且只能出現在選擇器主體的后面。

注意：后續版本可能會允許每個選擇器中出現多個偽元素。

從上面的定義，我們可以得知偽元素事實上創建了一個虛擬的元素，在這個虛擬元素上可以應用一般CSS規則乃至偽類選擇器。偽元素并不選定（過濾）元素，實際上它們選定（過濾）內容（::first-line,::first-letter）或創建內容（::before,::after，然后包裝到一個虛擬容器中，作者可以為此容器添加樣式。

盡管理論上使用JavaScript也可以獲取第一行文本或第一個字母，但這高度依賴于當前使用的字體家族、字體大小、元素寬度，浮動元素等各種因素，顯得相當繁瑣。而通過CSS偽元素我們可以方便獲得。文章最后提供了示例的訪問地址。

偽元素的實例

例1 - 使用偽元素給文字自動添加語言說明后綴

CSS代碼如下：

div:lang(zh){color:lime;background:#ff0;}

:lang(en) > span{color:#3111d3;}

HTML代碼如下：

效果圖如下：

• 本例使用偽類:lang來過濾lang屬性為特定值（如en-us）的元素。

• 使用偽元素::after來給元素（文本）自動添加語言說明后綴。

通過本例，可以對偽類和偽元素的不同作用有個直觀的認識。

例2 - 使用偽元素實現首行著色和段落投影

CSS代碼如下：

HTML代碼如下：

效果圖如下：

• 本例使用偽類:lang來過濾lang屬性為特定值（如en-us）的元素。

• 使用偽元素::after來給元素（文本）自動添加語言說明后綴。

例3 - 使用偽元素實現圓環圖形

CSS代碼如下：

HTML代碼比較簡單，就一行即可，如下：

<div class="circle"></div>

效果圖如下：

注：偽元素默認是inline樣式的，通過設置成絕對定位，可強制改變display為block，這樣對其設置寬高才能生效。

本例使用偽類:after來實現內圓。

偽類和偽元素的區別

本頭條號前面一篇文章《CSS 偽類：用來增強CSS選擇器》和本篇文章內容分別講述了偽類和偽元素的使用，我們應該已經大致理解了兩者的異同點，這里再總結一下：

兩者都不存在于HTML文檔樹中，都是為了支持依靠文檔樹之外的信息來進行格式化。

出于歷史兼容性原因，一些在CSS2.1規范之前引入的偽元素使用和偽類一樣的語法標記（單冒號:）。

偽類本質上和類相同，是用來選擇過濾HTML元素的。只不過偽類是按動態特征過濾，而不是名稱、屬性或內容。

偽元素本質上和元素相同，是已有元素的某個部分或新創建的補充元素。偽元素上可以應用偽類選擇器來過濾。

偽類可以出現在選擇器的任何地方，而偽元素只能添加在最后一個簡單選擇器之后。

附：本文示例的網址：http://www.ikinsoft.com/3ddemo/pseudoelem.html