CSS 偽元素

Created: October-16, 2018

CSS 偽元素是一種設定文件元素的方式，這些元素未由文件樹中的位置明確定義。

什麼是偽元素

CSS 偽元素允許你設定元素或元素部分的樣式，而無需向其新增任何 ID 或類。當你只想設定段落的第一個字母以建立首字下沉效果或者你想要在元素之前或之後插入某些內容（僅通過樣式表）時，它將非常有用。

CSS3 為偽元素引入了一種新的雙冒號（::）語法，以區分它們和偽類。偽元素的新語法如下：

selector::pseudo-element { property : value ; }

這些是以下最常用的偽元素：

::first-line 偽元素應用特殊的樣式新增到文字的第一行。

以下示例中的樣式規則格式化段落中的第一行文字。第一行的長度取決於瀏覽器視窗的大小或包含元素。

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

注意： 可應用 ::first-line 偽元素的 CSS 屬性包括：字型屬性，背景屬性，顏色，字間距，字母間距，文字修飾，垂直對齊，文字轉換，行高。

::first-letter 偽元素用於將特殊的樣式新增到文字的第一行的第一個字母。以下示例中的樣式規則格式化文字段落的第一個字母，並建立效果，如首字下沉。

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

注意： 可應用 ::first-letter 偽元素的 CSS 屬性包括：字型屬性，文字修飾，文字轉換，字母間距，字間距，行高，浮點數，垂直對齊（僅當’ 浮點 ‘時是’無’），顏色，邊距和填充屬性，邊框屬性，背景屬性。

::before 和 ::after 偽元素可以用於在一個元素的內容之前或之後插入生成的內容。的 CSS content 屬性與這些偽元素結合使用時，插入所生成的內容。

這對於進一步裝飾具有豐富內容的元素非常有用，該元素不應該是頁面實際標記的一部分。你可以使用這些偽元素插入常規文字字串或嵌入物件（如影象和其他資源）。

h1::before {
    content: url("images/marker-left.gif");
}
h1::after {
    content: url("images/marker-right.gif");
}

通常，我們需要使用這些偽元素僅為某段文字或其他塊級元素設定樣式。這就是宣告偽元素的類發揮作用的地方。偽元素可以與 CSS 類組合以產生特別對於具有該類的元素的效果。

以下示例中的樣式規則 class="article" 將顯示所有段落的第一個字母的顏色為綠色和大小為 xx-large。

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}