關於 CSS 偽元素的那些小事

偽元素是什麼？它能為前端解決哪些問題？為什麼要使用它？

前端工程師對於 ::before 和 ::after 這兩個偽元素應該不陌生，經常可見於網頁中。本篇我們將深入介紹更多偽元素的特性和應用。

什麼是「偽元素」？

「偽元素」之所以稱作「偽」，除了英文從「Pseudo」翻譯過來之外，就是因為它並不是真實存在於 DOM 中的元素，而是位於 CSSOM，HTML 和 DOM Tree 中都不會有它的身影，但行為與表現又和真正網頁元素一樣，也可以對其使用 CSS 操控。因為這樣的特性，適當的使用偽元素能簡化頁面上 HTML 標籤，讓 HTML 的維護更加輕鬆，也間接提升 SEO 效率。但也因為它不存在於網頁，不適合將重要資訊置於其中，反而會影響到 SEO 的成效，因此對於使用偽元素的定位，還是當作「輔助」性質會比較恰當。

在 W3C 的定義裡總共有五個偽元素（其他仍在測試階段），分別是 ::before、::after、::first-line、::first-letter 和 ::selection，為了和偽類區分，偽元素使用兩個冒號「::」開頭，而偽類使用一個冒號「:」開頭（像是 :hover、:target…等）。

上面提到偽類，也順便介紹一下偽類 Pseudo-classes 與偽元素 Pseudo-element 的差別

偽類能夠在特定動作時改變 DOM 的 CSS 樣式，例如最常見的 :hover，作用於當滑鼠移至設定 :hover 的元素上時，讓此元素改變原有的 CSS 。
偽元素則是基於原有的 DOM ，創建另一個可設定不同 CSS 的 DOM 屬性。

偽類 Pseudo-classes

圖片出處：mozilla.org

雖然現在的瀏覽器就算寫一個冒號也可以正常運作，不過為了方便區分二者，維持良好的編寫習慣，用兩個冒號還是比較好。唯一例外， ::selection 必須是兩個冒號才能正常運作。

::before 和 ::after

一）以 display: inline-block 的屬性存在

二）會繼承原本元素的屬性

三）必須設定 content，否則沒有作用

四）默認 user-select: none，代表 ::before 和 ::after 的内容無法被使用者選中

五）利用 ::after 清除 float

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

六）變形但內容不變，運用 ::before，將 transform 作用於偽元素上，這樣變形不會影響到附屬元素上的文字，而且不會使用多餘的 HTML 標籤

.heartShaped {
          position: absolute;
          top:50%;
          left: 50%;
          transform:translate(-50%,-50%) rotate(45deg);
          background: rgba(255, 20, 147, .85);
          width: 140px;
          line-height: 140px;
          text-align: center;
          color: white;
          font-size: 12px;
}
.heartShaped:before,
.heartShaped:after
{
          content: '';
          position: absolute;
          top: 0;
          left: -70px;
          width: 140px;
          height: 140px;
          border-radius: 50%;
          background: rgb(255, 20, 147);
          z-index: -1;
}
.heartShaped:after{
          top: -70px;
          left: 0;
 }

程式碼出處：http://chokcoco.github.io/magicCss/html/index.html#parallelogram

七）實現換行，代替換行標籤

inline-element::after {
         content:"\A";
         white-space: pre;
}

八）增強用戶體驗，增大點擊熱區

.btn::before {
         content:"";
         position:absolute;
         top:-10px;
         right:-10px;
         bottom:-10px;
         left:-10px;
}

九）計數器，簡易取代 JS

.selections>input[type=checkbox]{option1}+input[type=checkbox]{option2}
.selection-count

.selections{
  counter-reset: selection-count;
  
  & input:checked {
    counter-increment: selection-count;
  }
}
.selection-count::before {
  content: counter(selection-count);
}

程式碼出處：https://www.cnblogs.com/fsjohnhuang/p/9665156.html

::first-line

一）只能用於 display: block 的元素中

二）輕鬆指定附屬元素的第一行内容樣式

三）可用的 CSS 屬性 font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear

::first-letter

一）只能用於 display: block 的元素中

二）輕鬆指定附屬元素的第一個字母樣式

三）可用的 CSS 屬性 font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear

::selection

一）負責一段選取文字的效果，類似於螢光筆的功能

二）可用的 CSS 屬性 background, color

偽元素的用途多不勝數，且只要在 ie8 以上就能執行，以上是我們所整理出一些實用的偽元素小技巧，希望有幫助到大家在網頁的製作上帶來更多變化。

喜歡我們的朋友們，別忘了訂閱歐斯瑞電子報，以及追蹤我們的臉書粉絲團，隨時掌握最新資訊分享！

前端開發, 技術應用

關於 CSS 偽元素的那些小事