虛擬元素

CSS Podcast - 014: 擬似元素

如果你有文章內容，並且想讓第一個字母變成更大的首字母，該如何達成？

幾段文字段落，其中包含藍色首字大寫

在 CSS 中，您可以使用 ::first-letter 疑似元素來實現這類設計細節。

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

虛擬元素就像是新增或指定額外元素，但不必額外新增 HTML。這個使用 ::first-letter 的範例解決方案是眾多擬造元素之一。這些元素具有多種角色，您將在本課程中瞭解可用的擬造元素，以及如何使用這些元素。

::before和::after

::before 和 ::after 擬似元素會在元素中建立子元素，但只有您定義 content 屬性時才會。

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content 可以是任何字串，甚至是空字串，但請注意，除了空字串以外，螢幕閱讀器可能會朗讀其他字串。您可以新增圖片 url，系統會以原始尺寸插入圖片，因此無法調整圖片大小。你也可以插入 counter。

建立 ::before 或 ::after 元素後，您可以自由設定樣式，沒有任何限制。您只能將 ::before 或 ::after 元素插入可接受子項的元素 (含有文件樹狀結構的元素)，因此 <img />、<video> 和 <input> 等元素無法使用。

::first-letter

我們在課程一開始時就遇到這個擬似元素。請注意，指定 ::first-letter 時，並非所有 CSS 屬性都能使用。可用的屬性如下：

  • color
  • background 項資源 (例如 background-image)
  • border 項資源 (例如 border-color)
  • float
  • font 屬性 (例如 font-size 和 font-weight)
  • 文字屬性 (例如 text-decoration 和 word-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

只有在套用 ::first-line 的元素 display 值為 block、inline-block、list-item、table-caption 或 table-cell 時，::first-line 擬元素才能讓您設定第一行文字的樣式。

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

就像 ::first-letter 虛擬元素一樣，您只能使用部分 CSS 屬性：

  • color
  • background 個房源
  • font 個房源
  • text 個房源

::backdrop

如果您有以全螢幕模式顯示的元素，例如 <dialog> 或 <video>，您可以使用 ::backdrop 擬造元素，為背景 (元素與頁面其餘部分之間的空間) 設定樣式：

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker 擬似元素可讓您為清單項目的項目符號或數字，或 <summary> 元素的箭頭設定樣式。

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker 僅支援少數 CSS 屬性：

  • color
  • content
  • white-space
  • font 個房源
  • animation 和 transition 屬性

您可以使用 content 屬性變更標記符號。您可以使用這個方法，為 <summary> 元素的關閉和空白狀態設定加號和減號符號。

::selection

::selection 擬似元素可讓您設定所選文字的外觀樣式。

::selection {
  background: green;
  color: white;
}

這個偽元素可用於為所有所選文字套用樣式，如上方示範所示。您也可以搭配其他選取器使用，以便更精確地選取所需的項目。

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

與其他擬似元素一樣，只有部分 CSS 屬性可用於此元素：

  • color
  • background-color，但不是 background-image
  • text 個房源

::placeholder

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 10.1.

Source

您可以為表單元素新增輔助提示，例如含有 placeholder 屬性的 <input>。::placeholder 擬似元素可讓您為文字設定樣式。

input::placeholder {
  color: darkcyan;
}

::placeholder 僅支援 CSS 規則的子集：

  • color
  • background 個房源
  • font 個房源
  • text 個房源

::cue

Browser Support

  • Chrome: 26.
  • Edge: 79.
  • Firefox: 55.
  • Safari: 7.

Source

最後一個偽元素是 ::cue 偽元素。這可讓您為 WebVTT 提示設定樣式，這些提示是 <video> 元素的字幕。

您也可以將選取器傳遞至 ::cue，這樣就能在標題「內部」設定特定元素的樣式。

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

進行隨堂測驗

測驗您對擬元素的瞭解程度

下列何者不是擬造元素？

::before
別忘了新增 content: '';。
::first-paragraph
這在 CSS 中不存在。
::after
別忘了新增 content: '';。
::marker
這是使用清單元素或顯示類型時的項目符號元素。
::pencil
這在 CSS 中不存在。
:active
這是偽類別，而非偽元素。

您可以在 HTML 檔案中找到偽元素。

是
雖然開發人員工具可能會在「元素」面板中顯示擬元素，但 HTML 中不會出現擬元素，因為這些元素屬於瀏覽器。
否
雖然 CSS 可以指定這些元素，但在 HTML 中不會顯示。