今天是第 9 天，因為前幾天寫了偽類，所以今天就順便來整理偽元素囉！

Pseudo-elements 偽元素

偽元素是在畫面上看起來有這個元素，但是實際上卻不是一個真的元素，不存在 DOM 節點中，但是可以設定它的 CSS 樣式，就像真的元素一樣。

偽元素是以兩個冒號 :: 為開頭，後面加上名稱，例如 p::first-line ，會選取到 <p> 的第一行。

雖然現在 CSS3 是以一個冒號表示偽類，兩個冒號表示偽元素來做區分，不過因為考量到相容性的關係，舊有 CSS2 與 CSS1 的 :first-line、:first-letter、:before、:after 還是可以使用，但是還是建議遵守新的規範喔！

目前的規範中，每個選擇器只能應用一個偽元素。如果想併用，需要寫兩次，例如 ::first-line 與 ::first-letter 一起使用 (example 1)。

::first-line

• 會選取到元素的第一行
• 適用於 block-like container，像是 block、inline-block、table-caption 或 table-cell 等
• 可以使用的屬性：
  font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear
• 如果元素有使用到 ::before 或 ::after，偽元素的 content 也會被包含在裡面

::first-letter

• 會選取到元素的第一個字
• 適用於 block-like container，像是 block、inline-block、list-item、table-caption 或 table-cell 等
• 可以使用的屬性：
  font、color、background、margin、padding、border、text-decoration、vertical-align (限 float: none 時)、text-transform、line-height、float、clear
• 常用在首字母為大寫
• 如果該元素有使用 ::before 或 ::after，偽元素的 content 也會被包含在裡面

Example 1

如果想要讓首行文字變藍色，首字也要放大，不能這樣寫，需要分開寫兩次

// 錯誤示範
.example1 p::first-line::first-letter {
  color: blue;
  line-height: 2;
  font-size: 300%;
}

.example1 p::first-line {
  color: blue;
  line-height: 2;
}

.example1 p::first-letter {
  font-size: 300%;
}

那如果我又在 <p> 增加了 ::before 和 ::after

.example1 p::before {
  content: "123456789";
}

.example1 p::after {
  content: "987654321";
}

可以看到偽元素的內容有算在裡面，變成 1 為首字

::before and ::after

• 在元素的後面或前面插入內容，會繼承原本元素的屬性
• 一定要有 content 屬性 (明天繼續介紹)
• display 預設為 inline
• img、input、iframe 等置換元素無法使用

::marker

• 會選取到清單 (list-item)的圓點或數字
• 可以使用的屬性：
  font、color、content、white-space、animation、transition
• content 可以把清單前面的圓點或數字替換掉

Example 2

.example2 ul li::marker {
  content: "+ ";
  color: brown;
}

.example2 ol ::marker {
  color: purple;
}

可以看到水果清單從圓點變成加號

::selection

• 會選取到反白後的文字
• 可以使用的屬性：
  color、background-color、cursor、caret-color(閃動標點)、outline、text-decoration、text-emphasis-color(文字加重強調符號色彩，搭配text-emphasis)、text-shadow

.example3 p::selection {
  background-color: green;
  color: orange;
}

::placeholder

• 尚未納入規範標準中
• 用在 <input>、<textarea> 元素
• 可以使用的屬性：::first-line 的

明天會再繼續整理 content 屬性的值

Codepen

參考資料：
W3C - Pseudo-elements
W3schools - Pseudo-elements
MDN

文章同步更新於 medium