寫在前面：最近冷空氣來臨,大家注意保暖,如果有時間，也給許久未見的家人、朋友、那個你想見沒去見的人打個冬日的暖心電話吧。別等了，就這次吧。

2021年11月7日，立冬之時

前言

本文適合前端小白，或者是復習CSS的小伙伴，因為作者還是個前端小白（😁）。

一直經常會看到這兩玩意，但是一直沒去了解這個東東，光肝Java啦，現在是為了完成老師的任務，每天是一邊學一邊敲代碼。

個人感覺前端好玩還是好玩，樣式難調也是真的難調。

今天也是學到了這個小知識，趁著更文分享給大家。

一、偽元素概念

其實從字面意思上理解即可，偽字嗎，就是假的意思。偽元素其實就是一個真的存在但又是假的元素，它存在內容，但是它本身并不存在于文檔樹當中，也沒有任何html標簽。

二、我們為什么要使用偽元素？

H5之后，增加了很多語義化的元素進來，如nav、hader、footer這種語義化標簽，讓文檔樹更為清晰的，也能讓樣式和內容更好的分離。

而畫頁面的我們都知道，其實我們寫的很多標簽都是沒有明確的語義的，就只是為了實現某種樣式而額外添加的元素。而很多這種需要額外添加元素的實現的樣式，恰巧可以利用偽元素裝飾內容 (無論是裝飾圖片還是音效) 而不需要更改 HTML 的內容，從而幫助內容與樣式更好地分離。

就像如果僅僅為了畫一個裝飾用的三角就在 HTML 里多加一個元素，這上對于實際內容來說其實是多余的，對自動分析網頁的語義也可能會產生不好的影響。

簡而言之：偽元素選擇器可以幫助我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構。

應用場景

簡單說幾個最常見的例子吧。如下拉選擇框中的那個小角標、遮罩層、清除浮動

就如element組件中的下拉框：

另外一些小圖標、一些小三角同樣也是偽元素做的。

三、::before 和 ::after

3.1、::before

舊寫法(:before).

::before,在元素內部的前面插入內容。

CSS中，::before 創建一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素添加修飾性的內容。此元素默認為行內元素。另外content屬性是必填的屬性。

語法：

/* CSS3 語法 */ element::before { 樣式 }/* （單冒號）CSS2 過時語法 (僅用來支持 IE8) */ element:before { 樣式 }/* 在每一個p元素前插入內容 */ p::before { content: "Hello world!"; }

3.2、::after

::after在元素內部的后面插入內容。

CSS偽元素::after用來創建一個偽元素，作為已選中元素的最后一個子元素。通常會配合content屬性來為該元素添加裝飾內容。這個虛擬元素默認是行內元素。

語法:

element:after { style properties } /* CSS2 語法 */element::after { style properties } /* CSS3 語法 */

3.3、簡單示例

html代碼：

<div class="box1">我是博主 </div>

css 代碼：

.box1::before{content:"大家好" } .box1::after{content:"寧在春" }

效果圖：

如果我們要給這些偽元素設置寬度、高度什么，一定得寫上display:inline-block屬性，否則不會生效。

如下示例：

加了之后就ok拉

before 和 盒子 和 after 之間的關系大致如下圖

3.4、注意點

• before和after會創建一個元素，但是創建出來的元素是屬于行內元素。
• 另外新創建的元素在文檔樹中是找不到的
• before 和 after 必須有content 屬性
• before 在父元素內容前面創建元素，after 在元素內容的后面插入元素
• 偽元素選擇器和標簽選擇器一樣，權重為1

五、偽元素實現案例

5.1、場景五：偽元素字體圖標

就是做一個像element做一個這樣的。但是我不想那么復雜，這里就用個小火箭🚀模擬一下。

html代碼：

<div class="box1"> </div>

css代碼：

.box1{width: 200px;height: 35px;border: 1px solid #ccc; } .box1::after{content:"🚀" }

我們初始化的頁面是這樣的：

我們要放到那里去，第一個想法就是做定位。

偽元素它的父元素就是盒子本身，然后我們只需要設置父盒子相對定位即可，再設置偽元素絕對定位。

所以我們只需要修改一下css樣式即可

.box1 {width: 200px;height: 35px;border: 1px solid #ccc;position: relative; } .box1::after {content: "🚀";right: 10px;position: absolute;top: 6px; }

效果圖：

5.2、照片遮罩層

html代碼：

<div class="box1"><img src="./123.jpg"> </div>

css代碼

.box1 {width: 400px;height: 200px;position: relative; } .box1 img{width: 100%;height: 100%; } .box1::before {content:"";display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color:rgb(0, 0, 0,0.3) } /* 當我們鼠標經過了這個盒子 就讓里面的遮罩層顯示出來 */ .box1:hover::before{/* 經過就讓::before 顯示出來 */display:block; }

效果圖：

后語

目前還是前端小白，希望大家多多諒解，正在努力中。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

寫在最后：恭喜EDG，我們是冠軍。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」CSS3伪元素选择器 ::before ::after | 记录自己的前端学习日子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。