僞元素選擇器
選擇符 簡介
::before 在元素内部的前面插入内容
::after 在元素内部的後面插入内容
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: pink;
}
.box::before {
content: "小螃蟹";
}
.box::after {
content: "xpx";
}
</style>
</head>
<body>
<div class="box">
是
</div>
</body>
</html>
效果圖：
注意：
1. 隻有雙标簽才有僞元素，單标簽是無法建立僞元素的。
⚠️⚠️⚠️單标簽：input、img等單标簽是無法建立僞元素的。
2. 僞元素必須寫 content 屬性。
⚠️⚠️⚠️就算不放任何内容，也要寫 content:"" / content:’’
3. 僞元素預設顯示為行内元素。
4. 僞元素可以像正常的标簽一樣設定任何樣式。
5. 僞元素的權重是1。
⚠️⚠️⚠️ .box::before的權重是11
6. 建立出僞元素的結構和僞元素是父子關系。
⚠️⚠️⚠️ 當要用到定位的時候記得（子絕父相）
7. 建立出的僞元素是放在内容的前後，并不是放在結構前後。
8. 寫一個冒号也可以，目的是相容低版本的浏覽器。但是建議寫兩個冒号。
9. 新建立的這個元素在文檔書中是找不到的，是以我們成為僞元素。
10. 新建立的這個元素在文檔樹中是找不到的，是以我們稱為僞元素，JS 無法擷取僞元素。
應用場景：
一： 字型圖示
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)