伪元素的本质，及妙用
好了，上期讲解了什么是伪类，这期呢，我们来看看伪元素是什么？
我们可以看到，很多网站对它的定义为，用于向某些选择器设置特殊效果，这句话，真的是我还是不明白它在讲什么，太简洁了，我们来仔细分析分析这个鬼东西哈哈
伪元素的本质
这个伪元素，其实呢，就是个元素，但是呢，在html找不到对应的元素，所以它不占用dom元素节点，你只能在css样式里面发现它的踪迹，但是它也能跟其他真正的元素一样，实现相同的效果，因此被称为伪元素，这个元素伪装的到底挺好的。所以，我们来看看，它到底包含着哪些呢
看到这个，相比伪类，真的是福音哈哈。我们先before入手
（一）::before
在元素前插入一些内容，我们看看代码
<div class="pseudo-element">
<p>我是伪元素</p>
</div>
.pseudo-element {
border: 1px solid black;
width: 200px;
height: 200px;
}
好了，在css中加进伪元素的代码
.pseudo-element::before {
content: "我是before";
}
结果如下图所示
发现了没有，我并没有在html中加代码，而是在css中加了个before，也印证上面了上句话，它是不占dom节点的，js无法获取伪元素。下面after 也是同理
（二）::after
.pseudo-element::after {
content: "我是after";
}
写到这里，你可能会觉得，content里面是不是写啥都行呢，它就只能是个字符串或者中文嘛？ 哈哈这个问题确实有点意思， 上一篇博客已经整理好啦
https://blog.csdn.net/weixin_44142985/article/details/101594982 这个飞机票，想要了解的小伙伴可以去看看哈
好了，回归正题
(三)::first-line和first-letter 这两个就比较简单点啦，可能有复杂的但是我没想到哈
<div class="test">
<p>我是第一行
<br>
我是第二行
</p>
<h1>我是first-letter</h1>
</div>
.test p::first-line{
color: red;
}
.test h1::first-letter{
color: red;
}
如下图，相对比较简单，看看效果如下
好了，终于到了最艰难的时刻了，伪元素的妙用了
伪元素的妙用有很多，这里举几个例子，抛砖引玉，剩下的靠大伙啦
伪元素妙用
一般伪元素很多玩法，都是通过before和after来达到目的，我们先来看看它的用法
左边两个呢，在我上面的博客都有啦，一个是content的用法，这个是计数器的应用，还有一个清除浮动，第一篇写的很详细啦，有需要的可以去看看，现在我们先从右边开始
(一)与伪类的配合使用
<div class="test-wys">
<p>伪类与伪元素</p>
</div>
.test-wys p{
position: relative;
width: 200px;
height: 200px;
color: red;
background-color: transparent;
}
p::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: black;
opacity: 0.1;
}
P:hover::after {
opacity: 1;
}
其中涉及到的相对定位relative 和绝对定位absolute不懂得以后会出一个教程哈
上面得代码，如下图所示
鼠标过去的时候，如下图
可能会有小伙伴会问，我直接hover改变它的背景颜色不就好了，为何还要这么麻烦，其实，这种伪类和伪元素的结合，有时候对css优化是有一些方面的帮助的，比如 box-shadow ,通过在伪元素实现box-shadow 阴影，然后在hover改变透明度可以防止重绘，这个进阶的以后在css优化中会讲解
(二)after 和befre的绝对定位的使用
1.划分割线
<span>and</span>
span {
position: relative;
margin-left: 100px;}
span::after {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 100px;
height: 1px;
background-color: black;
margin-left: 40px;
}
span::before {
content: "";
position: absolute;
top: 12px;
right: 0;
width: 100px;
height: 1px;
background-color: black;
margin-right: 40px;
}
2.画出平行四边形
<div class="parallelogram">
平行四边形
</div>
.parallelogram {
width: 200px;
height: 200px;
position: relative;
background: transparent;
margin-left: 100px;
}
.parallelogram::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
其实本质就是通过伪元素对主元素的形状的重画重写，主元素的那个形状还在，伪元素就是自己根据主元素再画了一个
3.实现三角箭头
<div class="triangle">
三角形
</div>
.triangle {
border: 1px solid;
width: 100px;
height: 100px;
margin-left: 100px;
position: relative;
}
.triangle::after {
content: "";
display: block;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
position: absolute;
left: -20px;
top: 30px;
}
在这里，我们要注意的是，border的边框设置成了20px,我们先看看效果
可能你会看不懂他是怎么实现的，我们来分析分析，如下代码
.triangle {
border: 1px solid;
width: 100px;
height: 100px;
margin-left: 100px;
position: relative;
}
.triangle::after {
content: "";
display: block;
width: 100px;
height: 10px;
border-top: 20px solid red;
border-bottom: 20px solid yellow;
border-right: 20px solid black;
position: absolute;
left: -20px;
top: 30px;
}
把高度减少，你就会看到神奇的事情啦，自己动手试一试吧
4.动画效果
<div class="test-animate">
动画
</div>
.test-animate {
border: 1px solid black;
width: 200px;
height: 200px;
margin-left: 600px;
position: relative;
}
.test-animate::before {
content: "";
position: absolute;
top: 0;
width: 200px;
height: 2px;
background-color: black;
transition: 2s all ease;
}
.test-animate:hover::before {
content: "";
position: absolute;
top: -10px;
width: 200px;
height: 2px;
background-color: black;
transition: 0.4s all ease;
}
加上了 transition属性，就可以实现动画效果啦
还有更多效果，很多都是通过绝对定位来实现，加上动画效果，会有出其不意的效果。以后再分享一些相关的动画，敬请期待吧
喜欢的朋友点个关注，下次遇见不迷路哈哈
