概念

不需要異動 HTML 結構，而是利用 CSS 添加虛擬的元素在畫面上或是用來標記特定的元素。

1. ::before & ::after

用來建立子元素

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

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

content 一定要有！

::before 或是 ::after 建立出的元素可以使用任何樣式，沒有限制！

2. ::first-letter

只允許使用以下屬性：

• color
• background 系列
• border 系列 (例如：border-color)
• float
• font 系列 (例如：font-size、font-weight)
• text 系列

<span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quae necessitatibus fugit culpa numquam iusto vero iure provident natus, eveniet nesciunt perspiciatis ut praesentium eos, nulla dignissimos voluptates possimus similique?</span>

<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quae necessitatibus fugit culpa numquam iusto vero iure provident natus, eveniet nesciunt perspiciatis ut praesentium eos, nulla dignissimos voluptates possimus similique?</p>

.text::first-letter {
  color: red;
  font-weight: 900
}

＊只有 p 元素的首字 L 會被套用以上樣式，因為 ::first-letter 只能用在 block 容器上

3. ::first-line

只允許使用以下屬性：

• color
• background 系列
• font 系列 (例如：font-size、font-weight)
• text 系列

4. ::backdrop

例如：<dialog> 元素以全螢幕顯示時，backdrop 指的是 dialog 以外的所有空間。

Backdrop 出現在以下時機：

• 當元素使用 Fullscreen API 中的 requestFullscreen() 時
• 使用 HTMLDialogElement.showModal() 讓 <dialog> 在最上層顯示時
• 使用 HTMLDialogElement.showPopover() 讓 Popover 元素在最上層顯示時

即使有多個元素被置於最上層顯示，每一個元素都有自己的 ::backdrop

5. ::marker

清單項目的標記或是編號

只允許使用以下屬性：

• color
• content
• white-space
• font 系列
• animation 和 transition 系列

6. ::selection

反白選取的文字

只允許使用以下屬性：

• color
• background-color (background-image 不行)
• text 系列

7. ::placeholder

只允許使用以下屬性：

• color
• background 系列
• font 系列
• text 系列

8. ::cue

用來替 video 元素的字幕增加樣式，也可以傳入 selector 選取特定的文字區塊

<video controls src="/media/cc0-videos/friday.mp4">
  <track default kind="captions" srclang="en" src="/media/examples/friday.vtt" />
  Sorry, your browser doesn't support embedded videos.
</video>

// friday.vtt 內容
WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels

video {
  width: 100%;
}

/* 設定 friday.vtt 字幕的文字樣式*/
video::cue {
  font-size: 1rem;
  color: yellow;
}

/* 選取字幕中的 <u> 元素，標為紅色 */
::cue(u) {
  color: red;
}

範例取自 MDN Web Docs - ::cue

最後影片中只會有 "lord of the universe" 這段<u>文字被標記為紅色

參考資料

MDN Web Docs - ::cue