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