CSS Pseudo-elements 偽元素 | 梧所不學

本文要介紹的是 CSS 偽元素（Pseudo-elements），偽元素能讓開發者在不增加額外HTML 標籤的情況下，對元素的特定部位進行樣式設置或插入內容。

什麼是偽元素？

偽元素用於選取元素的特定部分，例如第一個字、第一行文字，或是在元素內容的前後插入額外的內容。偽元素的語法以 :: 為前綴，例如 ::before 和 ::after。

常用的偽元素

• ::before：在元素的內容前插入內容。
• ::after：在元素的內容後插入內容。
• ::first-letter：選取元素第一個字元。
• ::first-line：選取元素的第一行。
• ::selection：選取使用者選取的部分。

偽元素的常見應用

::before 和 ::after

::before 和 ::after 通常會與 content 屬性搭配使用，可在不修改 HTML 結構的情況下，插入裝飾性內容。例如：在按鈕文字的前後會自動加上符號，提升視覺效果。

.button::before {
  content: "🔥 ";
}

.button::after {
  content: " ➜";
}

::first-letter 和 ::first-line

::first-letter 和 ::first-line 可用於改善排版，使內容更具可讀性。例如：讓段落的第一個字變大，模擬書籍開頭的首字放大效果。

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

::selection

::selection 可用來設定使用者選取文字時的顯示方式，例如：當使用者選取文字時，背景會變成黃色，而字體顏色則變為黑色。

::selection {
  background-color: yellow;
  color: black;
}

結語

CSS 偽元素能提升開發的靈活度，也能讓你的 HTML 結構更為簡潔。