写在前面：最近冷空气来临,大家注意保暖,如果有时间，也给许久未见的家人、朋友、那个你想见没去见的人打个冬日的暖心电话吧。别等了，就这次吧。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，我们是冠军。
