重新認識 CSS - Pseudo-element (偽元素)

發表於 2019-09-21 | 更新於 2019-10-15 | 留言

分類於 CSS

Selector (選擇器) 可用來選擇 HTML 和 XML 文件中的節點，並將樣式屬性綁定到文件 (HTML 和 XML) 中的元素上。當選擇器與某元素 match 的時候，就可以對選到的元素進行 CSS 樣式設定。本篇會介紹 pseudo-element (偽元素)，包括 ::before 和 ::after。

前言

「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加了解 CSS 的原理，讓我在切版的時候可以更加確定自己在做什麼，我踩到的雷只是因為我不夠了解它才會炸開。
在這 30 天的內容中，會將 Spec 內看到的資料整理成這個系列，也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog，如果想直接看文內的程式碼 Demo 畫面，可以到我的 Blog 來看 😃。
本文同步發表於 iT 邦幫忙：重新認識 CSS - Pseudo-element (偽元素)
「重新認識 CSS」系列文章發文於：
iT 邦幫忙
Titangene Blog

Pseudo-elements

pseudo-element 代表不直接存在於 document tree 中的元素。

document language (文件語言) 不提供存取元素內容的第一個字母或第一行的機制，但是可以用 ::first-letter 和 ::first-line 這兩個 pseudo-element 選到，這樣就可以對這些元素設定樣式。

另外，pseudo-element 還可以表示原始文件 (source document) 中根本不存在的內容，例如 ::before 和 ::after 這兩個 pseudo-element 可以在任何元素的內容之前或之後插入其他內容。

pseudo-class 和 pseudo-element 都不會出現在 document source 或 document tree 中，或是不會對其進行修改。所以，pseudo-class 和 pseudo-element 都不會影響到 structural pseudo-class 或與它們的 originating (原始) 元素或其 tree 有關的其他 selector 的解譯 (interpretation)。

Structural pseudo-class 詳情可參考我前幾天寫的「重新認識 CSS - Pseudo-class (偽類) (2)」。

originating (原始) 元素是什麼？

pseudo-element 綁定到頁面上的某個元素，而此元素就稱為 originating 元素。例如：

1	`div a::before { content: 'Hi '; }`

在 selector div a::before 中，與 selector match 的 a 元素就是 originating 元素。

如果想更了解 pseudo-element，可以看它在以下這些 CSS Spec 的定義：

Generated Content Pseudo-elements: `::before` and `::after`

::before：在 originating 元素的內容之前建立的 child pseudo-element
::after：在 originating 元素的內容之後建立的 child pseudo-element

::before 和 ::after 的 CSS content 屬性的初始值為 normal，計算值為 none。

當 ::before 和 ::after 的計算 content 值不為 none 時，這些 pseudo-element 就會產生 box，就好像它們是其 originating (原始) 元素的直接子元素一樣，並且可以像在 document tree 中任何 normal document-sourced (基於文件) 的元素一樣進行樣式設定

例如：

在 class 為 note 的 p 元素的內容之前插入字串 "Note: "
在 class 為 note 的 p 元素的內容之後插入字串 “!”

1	`<p class="note">test</p>`

1 2	`p.note::before { content: "Note: "; } p.note::after { content: "!"; }`

Demo：Codepen 連結

::before 和 ::after 的 display 的初始值為 inline，所以會生成 inline box。與 p 元素的其他 inline children 一樣，它會參與 p 元素的 IFC (inline formatting context)，有可能與其他內容共享一行。

就如下面範例那樣，因為 ::before 和 ::after 都是 display: inline，並且在 p 元素的內容 test 之前加上 ::before 的內容 "Note: "，以及在 test 之後加上 ::after 的內容 "！"，所以在畫面上顯示的結果就變成 Note: test!。

`content` 字串換行

如果想在 content 屬性內將字串換行要怎麼做？只要在字串中加入 \A 這個 escape sequence (轉義序列)，它就會在 generated content 中包含 newline，而這個插入的 line break 也會受到 white-space 屬性的影響。有關 \A escape sequence 的詳情可參 CSS 2 的字串和字元與大小寫部份。

h2:before {
  display: block;
  text-align: center;
  white-space: pre;
  content: "Hello\A Titan"
}

最後

今天介紹一些 ::before 和 ::after 這兩個 pseudo-element，接下來幾天會接續介紹其他 selector。

資料來源：

IT 鐵人賽