伪元素的本质，以及伪元素的妙用（下）

伪元素的本质，及妙用

好了，上期讲解了什么是伪类，这期呢，我们来看看伪元素是什么？

我们可以看到，很多网站对它的定义为，用于向某些选择器设置特殊效果，这句话，真的是我还是不明白它在讲什么，太简洁了，我们来仔细分析分析这个鬼东西哈哈

伪元素的本质

这个伪元素，其实呢，就是个元素，但是呢，在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属性，就可以实现动画效果啦

还有更多效果，很多都是通过绝对定位来实现，加上动画效果，会有出其不意的效果。以后再分享一些相关的动画，敬请期待吧

喜欢的朋友点个关注，下次遇见不迷路哈哈