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

語言: CN / TW / HK

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: '回答:'
}

```

image.png

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

```html

今天天氣為多雲
今天天氣為多雲
今天天氣為多雲
今天天氣為多雲
今天天氣為多雲

```

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

image.png

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

```html

閱讀和寫作同樣重要

閱讀和寫作同樣重要

閱讀和寫作同樣重要

閱讀和寫作同樣重要

```

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

image.png

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

結合clear屬性清除浮動

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

禁用網頁ctrl+f搜尋

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

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

image.png

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

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

可以先看一下效果

QQ20221107-211031-HD (1).gif

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

程式碼片段 ```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;
}

```

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