CSS 偽元素指南

在 CSS 的世界裡，偽元素是一個強大但常被忽視的功能。本文將深入探討 CSS 偽元素，特別是 ::before 和 ::after，以及其他常用的偽元素。

什麼是偽元素？

偽元素允許您在文檔中插入內容或選擇特定部分，而無需修改 HTML 結構。它們使用雙冒號 :: 語法（儘管出於向後兼容性，某些偽元素也支援單冒號 : 語法）。

CSS 偽元素列表

以下是常見的 CSS 偽元素：

  1. ::before - 在元素內容之前插入內容
  2. ::after - 在元素內容之後插入內容
  3. ::first-line - 選擇元素的第一行
  4. ::first-letter - 選擇元素的第一個字母
  5. ::selection - 選擇用戶高亮的部分
  6. ::placeholder - 選擇輸入框的預設文字
  7. ::marker - 選擇列表項目的標記（例如點或數字）
  8. ::backdrop - 用於全螢幕元素底下的背景

較少使用但在特定情況下很有用的偽元素：

  1. ::cue - 用於 WebVTT 字幕
  2. ::slotted() - 用於 Web Components 中的投影內容

::before 和 ::after 詳解

::before 和 ::after 是最常用的偽元素，它們允許我們在元素的內容之前或之後插入生成的內容。

基本語法

1
2
3
4
5
6
7
selector::before {
  content: "你想插入的內容";
}

selector::after {
  content: "你想插入的內容";
}

注意: content 屬性是必須的，即使它的值是空字串。

常見用途

  1. 添加圖示
  2. 創建裝飾性元素
  3. 清除浮動 (clearfix)
  4. 添加工具提示
  5. 實現計數器功能

（這裡可以保留原文中的詳細例子）

其他偽元素的使用

::first-line 和 ::first-letter

這兩個偽元素常用於排版設計，特別是文章或段落的開頭。

1
2
3
4
5
6
7
8
9
p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 5px;
}

::selection

用來自定義用戶選中文字時的樣式。

1
2
3
4
::selection {
  background-color: #ffb7b7;
  color: #000;
}

::placeholder

自定義輸入框的預設文字樣式。

1
2
3
4
input::placeholder {
  color: #999;
  font-style: italic;
}

::marker

自定義列表項目的標記樣式。

1
2
3
4
li::marker {
  color: #1a73e8;
  font-size: 1.2em;
}

::backdrop

當元素處於全螢幕模式時，為其底下的背景添加樣式。

1
2
3
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

注意事項

  1. 偽元素預設是行內元素。
  2. 偽元素無法選中或直接操作，因為它們不存在於 DOM 中。
  3. 某些 HTML 元素（如 img）不支援 ::before 和 ::after。
  4. 不是所有的偽元素都能在所有元素上使用，使用時需要注意兼容性。

結論

CSS 偽元素為網頁設計師和開發者提供了豐富的可能性。它們允許我們添加額外的內容、修改特定部分的樣式，同時保持 HTML 的簡潔和語義化。靈活運用這些偽元素，可以讓你的網頁設計更加靈活、有創意，同時提高代碼的可維護性。

希望這篇完整的 CSS 偽元素指南能幫助你更好地理解和運用這些強大的 CSS 功能。happy coding!