CSS 偽元素 參考
CSS 偽元素
CSS 偽元素用於為元素的特定部分設定樣式。
例如，它可以用於
- 設定元素的第一個字母或第一行樣式
- 在元素的內容之前或之後插入內容
- 設定列表項標記的樣式
- 設定對話方塊後面的檢視框樣式
下表顯示了 CSS 中的不同偽元素
| 偽元素 | 示例 | 示例描述 |
|---|---|---|
| ::after | p::after div::after |
在指定元素的末尾插入一些內容 |
| ::backdrop | dialog::backdrop | 設定對話方塊或彈出視窗元素後面的檢視框樣式 |
| ::before | p::before div::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 textarea::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 | 表示檢視轉換的“舊”檢視狀態 |
