虛擬元素

CSS Podcast - 014: Pseudo-elements

如果畫面上有一篇文章 想要讓第一批信能夠大幅提高掉落上限 該怎麼做呢？

兩段文字，搭配藍色放置帽

在 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

「只有」定義 content 屬性時，::before 和 ::after 虛擬元素才能在元素內建立子項元素。

.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 的元素值為 block、inline-block、list-item、table-caption 或 table-cell 時，::first-line 虛擬元素才能讓您設定第一行文字的樣式。display

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

瀏覽器支援

  • 57
  • 79
  • 51
  • 10.1

資料來源

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

input::placeholder {
  color: darkcyan;
}

::placeholder 僅支援部分 CSS 規則：

  • color
  • background 項資源
  • font 項資源
  • text 項資源

::cue

瀏覽器支援

  • 26
  • 79
  • 55
  • 7

資料來源

最後一本虛擬元素導覽是 ::cue 虛擬元素。這樣做可讓您設定 WebVTT 提示的樣式，也就是 <video> 元素的說明文字。

您也可以將選取器傳遞至 ::cue，以在說明文字「內」設定特定元素的樣式。

video::cue {
  color: yellow;
}

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

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

隨堂測驗

測驗您對虛擬元素的相關知識

下列何者不是虛擬元素？

::before
別忘了加上「content: '';」。
::first-paragraph
CSS 中沒有這個 ID。
::after
別忘了加上「content: '';」。
::marker
當您使用清單元素或顯示類型時，這是項目符號元素。
::pencil
CSS 中沒有這個 ID。
:active
這是虛擬類別，不是虛擬元素。

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

是
雖然開發人員工具會在「Elements」面板中顯示虛擬元素，但在 HTML 中找不到虛擬元素，仍是由瀏覽器所擁有。
否
它們可以由 CSS 指定，但在 HTML 中找不到。