CSS 偽元素參考手冊

CSS 偽元素

CSS 偽元素用于設置元素特定部分的樣式。

例如，它可以用于：

  • 設置元素的第一個字母或第一行的樣式
  • 在元素內容之前或之后插入內容
  • 設置列表項標記的樣式
  • 設置對話框背景視圖的樣式

下表展示了 CSS 中不同的偽元素：

偽元素 例子 例子描述
::after p::after 在指定元素的內容之后插入內容。
::backdrop dialog::backdrop 設置對話框或彈出元素背景視圖的樣式。
::before p::before 在指定元素的內容之前插入內容。
::file-selector-button ::file-selector-button 選擇類型為 <input type="file"> 的按鈕。
::first-letter p::first-letter 選擇每個 <p> 元素的第一個字母。
::first-line p::first-line 選擇每個 <p> 元素的第一行。
::grammar-error ::grammar-error 設置瀏覽器標記為語法錯誤的文本樣式。
::highlight() ::highlight(custom-name) 選擇自定義高亮。
::marker ::marker 選擇列表項的標記。
::placeholder input::placeholder 設置 <input> 或 <textarea> 元素的占位符文本的樣式。
::selection ::selection 設置用戶選中文本的樣式。
::spelling-error ::spelling-error 設置瀏覽器標記為拼寫錯誤的文本樣式。
::view-transition ::view-transition 表示視圖過渡疊加層的根，包含頁面上的所有視圖過渡。
::view-transition-group ::view-transition-group 表示單個視圖過渡快照組。
::view-transition-image-pair ::view-transition-image-pair 表示視圖過渡的“舊”和“新”視圖狀態的容器（過渡前后）。
::view-transition-new ::view-transition-new 表示視圖過渡的“新”視圖狀態。
::view-transition-old ::view-transition-old 表示視圖過渡的“舊”視圖狀態。