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

留言

目錄

  1. 前言
  2. Pseudo-elements
    1. originating (原始) 元素是什麼?
    2. Generated Content Pseudo-elements: ::before and ::after
      1. content 字串換行
  3. 最後

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」系列文章發文於:

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 為 notep 元素的內容之前插入字串 "Note: "
  • 在 class 為 notep 元素的內容之後插入字串 “!”
1
<p class="note">test</p>
1
2
p.note::before { content: "Note: "; }
p.note::after { content: "!"; }

Demo:Codepen 連結

::before::afterdisplay 的初始值為 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 的 字串字元與大小寫 部份。

1
2
3
4
5
6
h2:before {
display: block;
text-align: center;
white-space: pre;
content: "Hello\A Titan"
}

最後

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

資料來源:

分享:

討論區