CSS - 偽元素

發表於 更新於

偽類與偽元素

偽類（Pseudo-classes ）與偽元素（Pseudo-element）兩者都是 CSS 為了擴張變化性而衍生出的選擇器，偽類以元素狀態、結構為主要的選擇方式：

  • :checked（狀態）
  • :focus（狀態）
  • :root（結構）
  • :first-child（結構）
  • :nth-child（結構）

而偽元素則是以 before、after 這兩兄弟為主要被探討的對象，可以說是偽元素的代名詞！截至目前為止，偽元素家族比起偽類家族，算是少數。追朔早期，偽元素與偽類一樣，都是以單冒號:為主，至今依舊可以使用單冒號來選擇偽元素，但從 CSS3 開始，偽類與偽元素開始分家，偽元素被定義成雙冒號::作為選擇器，隨著前端技術我們必須修正前進，應該使用雙冒號來表示偽元素，不要使用單冒號。

  • ::before
  • ::after
  • ::first-line
  • ::first-letter
  • ::selection
  • ::backdrop

以瀏覽器來看偽類與偽元素，進入開發者模式，偽類不會出現在 Elements 結構畫面，但是偽元素 ::before、::after 會在被選擇的元素內容前後出現，雖然它們可以長在 DOM 身上，但依舊不被 DOM 接納，只能被 CSSOM 所渲染，因此不能使用 JavaScript 或 jQuery 任何獲取 DOM 元素的方式選擇到偽元素。

偽元素建立與特性

這裡的偽元素指的是 ::before 與 ::after 。

  1. content 是必須的屬性，沒有無法建立偽元素。
  2. 被建立時，類型為 inline。
  3. 通常要 display 轉型才能做較多的事情。
  4. 與絕對定位一起使用時，別忘記本體的定位點。
  5. img、input、iframe 等置換元素無法使用偽元素。
/* 建立偽元素時，一定要有 content */
.box::before {
  content: '';
}

偽元素是元素的分身

元素如果是主體，::before 與 ::after 兩兄弟是元素主體的分身，也就是元素可以多出兩個容器來做更多事情。就好像 1942~1945 射擊遊戲兩側的小飛機，好吧，我知道沒人聽過。

又或像是火影忍者的影分身之術，聽過了．．．吧。

這兩分身應用非常多元、非常廣，難以一一談論，能發揮在各種場合，大致上可以分為修飾主體缺少的部分，或是替主體增加更多層次的樣式，又或是三位一體組合的概念，舉個例子，我要畫米老鼠的頭部，元素主體畫了圓臉，兩分身再各畫一隻圓耳朵，這樣只用了一個元素做到了三個圓的樣式。因此，偽元素具有節省元素數量的效果，不用為了做一個效果而多使用一個元素標籤。

偽元素的層級

可以從 html 結構看出在一般流向裡面，::before 之後接著是主體的內容區域，再接著::after。因此若對::before 與::after 進行絕對定位，兩者都會被拉升至定位層蓋住主體的內容區域。當然，若對主體內容區域使用絕對定位，則三者都進入定位層，又會依照排列順序後者蓋過前者（::before < 內容 < ::after）。可以使用 z-index:-1 將一個調至最下層。

實用文章

JS 控制偽元素的方法彙總