共计 2429 个字符，预计需要花费 7 分钟才能阅读完成。
写在后面： 最近冷空气降临, 大家留神保暖, 如果有工夫，也给许久未见的家人、敌人、那个你想见没去见的人打个冬日的暖心电话吧。别等了，就这次吧。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，咱们是冠军。
