CSS 偽元素 (Pseudo-elements)

偽元素 (pseudo-element) 用來選取元素的特定部分，或是在元素前後插入內容。偽元素的語法是在選擇器後面加上兩個冒號 :: 和偽元素名稱。

selector::pseudo-element {
  property: value;
}
在舊版 CSS 中，偽元素使用單冒號 : 的語法，所以你可能會在一些舊程式碼中看到 :before 或 :after。現代 CSS 使用雙冒號 :: 來區分偽類和偽元素。

::before 和 ::after

在元素的內容「之前」或「之後」插入內容，必須搭配 content 屬性使用。

.quote::before {
  content: "「";
}

.quote::after {
  content: "」";
}

<p class="quote">這是一段引言</p>
<!-- 顯示結果：「這是一段引言」 -->

::before 和 ::after 產生的是「行內元素」，可以用 display 改變。

應用範例：裝飾性圖示

.external-link::after {
  content: " ↗";
  font-size: 0.8em;
}

.required::after {
  content: " *";
  color: red;
}

應用範例：清除浮動 (Clearfix)

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

應用範例：裝飾線條

h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background-color: blue;
  margin-top: 10px;
}

::first-line

選取元素的第一行文字。

p::first-line {
  font-weight: bold;
  color: navy;
}

只能使用部分的 CSS 屬性，包括：字體相關、顏色、背景、word-spacing、letter-spacing、text-decoration、text-transform 等。

::first-letter

選取元素的第一個字母。

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

這個技巧常用於文章開頭的「首字放大」效果。

::selection

選取使用者用滑鼠選取（反白）的文字。

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

/* 也可以針對特定元素 */
p::selection {
  background-color: lightblue;
}

::placeholder

選取表單輸入框的 placeholder 文字。

input::placeholder {
  color: #999;
  font-style: italic;
}

<input type="text" placeholder="請輸入您的名字">

::marker

選取列表項目的標記符號（例如 <li> 前面的圓點或數字）。

li::marker {
  color: red;
  font-weight: bold;
}

/* 自訂標記符號 */
li::marker {
  content: "→ ";
}

偽元素總覽

偽元素說明
::before在元素內容之前插入內容
::after在元素內容之後插入內容
::first-line元素的第一行
::first-letter元素的第一個字母
::selection使用者選取的文字
::placeholder輸入框的 placeholder 文字
::marker列表項目的標記符號

::before / ::after 注意事項

  1. 必須有 content 屬性：即使不需要文字內容，也要寫 content: ""
  2. 無法用於某些元素：<img>、<input>、<br> 等沒有內容的元素無法使用
  3. 預設是行內元素：需要時可用 display: block 或 display: inline-block 改變
/* 常見錯誤：忘記加 content */
.icon::before {
  background-image: url('icon.png');
  width: 20px;
  height: 20px;
  /* 這樣不會顯示！缺少 content */
}

/* 正確寫法 */
.icon::before {
  content: "";
  display: inline-block;
  background-image: url('icon.png');
  width: 20px;
  height: 20px;
}