詳解css中偽元素::before和::after和創意用法

---

theme: smartblue

本文為稀土掘金技術社群首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！

偽類和偽元素

首先我們需要搞懂兩個概念，偽類和偽元素，像我這種沒有系統全面性的瞭解過css的人來說，突然一問我偽類和偽元素的區別我還真不知道，我之前一直以為這兩個說法指的是一個東西，就是我題目中的提到的那兩個::before和::after。偶然間才瞭解到，原來指的是兩個東西

偽類

w3cSchool對於偽類的定義是”偽類用於定義元素的特殊狀態“。向我們常用到的:link、:hover、:active、:first-child等都是偽類，全部偽類比較多，大家感興趣的話可以去官方文件瞭解一下

偽元素

至於偽元素，w3cSchool的定義是”CSS 偽元素用於設定元素指定部分的樣式“，光看定義我是搞不懂，其實我們只要記住有哪些東西就好了，偽元素共有5個，分別是::before、::after、::first-letter、::first-line和::selection

偽類和偽元素可以疊加使用，如.sbu-btn:hover::before，本文後面示例部分也會用到此種用法。

::first-letter主要用於為文字的首字母新增特殊樣式

注意：::first-letter 偽元素只適用於塊級元素。

::first-line 偽元素用於向文字的首行新增特殊樣式。

注意：::first-line 偽元素只能應用於塊級元素。

::selection 偽元素匹配使用者選擇的元素部分。也就是給我們滑鼠滑動選中的部分設定樣式，它可以設定以下屬性 - color - background - cursor - outline

以上幾種我們簡單瞭解一下就可以了，也不在我們今天的討論範圍之內，今天我們來著重瞭解一下::before和::after，相信大家在工作中都或多或少的用過，但很少有人真的去深入的瞭解過他們，本文是我對我所知的關於他們用法的一個總結，如有缺漏，歡迎補充。

用法及示例

::before用於在元素內容之前插入一些內容，::after用於在元素內容之後插入一些內容，其他方面的都相同。寫法就是隻要在想要新增的元素選擇器後面加上::before或::after即可，有些人會發現，寫一個冒號和兩個冒號都可以有相應的效果，那是因為在css3中，w3c為了區分偽類和偽元素，用雙冒號取代了偽元素的單冒號表示法，所以我們以後在寫偽元素的時候儘量使用雙冒號。

不同於其他偽元素，::before和::after在使用的時候必須提供content屬性，可以為字串和圖片，也可以是空，但不能省略該屬性，否則將不生效。

給指定元素前新增內容

這個用法是最基礎也是最常用的，比如我們可以給一個或多個元素前面或者後面新增想要的文字

```html

```

```css .class1::before { content: '問卷'; font-size: 30px; }

.class1 .q::before {
  content: '問題：'
}

.class1 .a::before {
  content: '回答：'
}

```

當然也可以新增形狀，預設的是行內元素，如果有需要，我們可以把它變為塊級元素

```html

```

css .news-item::before { content: ''; display: inline-block; width: 16px; height: 16px; background: rgb(96, 228, 255); margin-right: 8px; border-radius: 50%; }

我們也可以使用它來新增圖片

```html

```

css .class3 .text1::before { content: url(http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg); }

不過這一方法的缺點就是，不能調整圖片大小，如果我們需要使用偽元素新增圖片的話，建議通過給偽元素設定背景圖片的方式設定

結合clear屬性清除浮動

我們都知道清除浮動的一種方式就是給一個空元素設定clear:both屬性，但在頁面裡新增過多的空元素一方面程式碼不夠簡潔，另一方面也不便於維護，所以我們可以通過給偽元素設定clear:both屬性的方法更好的實現我們想要的效果

禁用網頁ctrl+f搜尋

有些時候，我們不想要使用者使用ctrl+f搜尋我們網頁內的內容，必須在一些文字識別的網頁小遊戲裡，我們又不想把文字做成圖片，那麼就可以使用這個屬性，使用::before和::after渲染出來的文字，不可選中也不能搜尋。當然這個低版本瀏覽器的相容性我木有試，谷歌瀏覽器和safari是可以實現不能選中不可搜尋的效果的。

拿上面的示例進行嘗試，可以看到，我們使用偽元素新增的[問題]兩個字，就無法使用瀏覽器的搜尋工具搜到。

製作一款特殊的滑鼠滑入滑出效果

這個效果還是之前一個朋友從某網站看到之後問我能不能實現，我去那個網站查看了程式碼學會的，覺得很有趣，特意分享給大家。

可以先看一下效果

這裡附上原始碼和線上演示

程式碼片段 ```css .h-button { z-index: 1; position: relative; overflow: hidden; }

.h-button::before,
.h-button::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  filter: brightness(.9);
  background-color: inherit;
  z-index: -1;
}

.h-button::before {
  left: 0;
}

.h-button:after {
  right: 0;
  transition: width .5s ease;
}

.h-button:hover::before {
  width: 100%;
  transition: width .5s ease;
}

.h-button:hover::after {
  width: 100%;
  background-color: transparent;
}

```

這裡我做了一些改進，就是滑鼠滑入之後的顏色是對按鈕本身顏色進行一定的變換得來的，這樣我們就無需對每一個按鈕單獨設定滑鼠滑入時候的顏色了，全域性時候的時候只需要對目標按鈕新增一個類名h-button就可以，更加的方便簡單，當然，如果大家覺得這樣的顏色不好看的話，還是可以自行設定，或者修改一我對顏色的處理方式

這個效果的實現思路其實很簡單，就是使用::before和::after給目標按鈕新增兩個偽元素，然後使用定位讓他們重合在一起，再通過改變兩者的寬度實現的。

首先是建立兩個偽元素，寬高都和目標元素一致，我這裡的背景色由於是對按鈕本身顏色進行處理得來的，所以給他們設定的背景色是沿用父級背景色，如果你想單獨設定這裡可以分別設定為自己想要的顏色。

```css .h-button { z-index: 1; position: relative; overflow: hidden; }

.h-button::before,
.h-button::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  filter: brightness(.9);
  background-color: inherit;
  z-index: -1;
}

```

我們的實現原理是通過改變偽元素的寬度實現，所以我們需要第一個偽元素的定位以左邊為準，從而實現滑鼠移入時色塊從左往右出現的效果，而第二個偽元素的定位以右為準，從而實現滑鼠移出時色塊從左往右消失的效果。

這裡可以看到，我們在沒有給第一個偽元素的初始狀態新增過渡效果，那是因為它只需要在從滑鼠移出的時候展示動畫即可，在滑鼠移出的時候需要瞬間消失，所以在初始狀態不需要新增過渡效果，而第二個偽元素恰恰相反，它在滑鼠滑入的時候不需要展示動畫效果，在滑鼠滑入也就是迴歸初始狀態的時候需要展示動畫效果，所以我們需要在最開始的時候就新增上過渡效果。

```css .h-button::before { left: 0; }

.h-button::after {
  right: 0;
  transition: width .5s ease;
}

```

兩個偽元素的初始寬度都為0，滑鼠滑入的時候，讓兩個偽元素寬度都變為100%，由於滑鼠滑入時我們並不需要第二個偽元素出現，所以這裡我們給它的背景顏色設定為透明，這樣就可以實現滑鼠滑入時只展示第一個偽元素寬度從0到100%的動畫，而滑鼠移出時第一個偽元素寬度變為0，因為沒有過渡效果，所以它的寬度會瞬間變為0，然後展示第二個色塊寬度從100%到0的動畫效果。

```js .h-button:hover::before { width: 100%; transition: width .5s ease; }

.h-button:hover::after {
  width: 100%;
  background-color: transparent;
}

```

偽元素能實現的創意用法還有很多，如果大家有不同的用法，歡迎分享，希望本篇文章可以對大家有所幫助。