伪元素选择器
选择符 简介
::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=)