写在后面：最近冷空气降临,大家留神保暖,如果有工夫，也给许久未见的家人、敌人、那个你想见没去见的人打个冬日的暖心电话吧。别等了，就这次吧。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，咱们是冠军。
发表回复