:after/::after和:before/::before的不同之处在哪里？

在使用CSS伪元素时，我们可能会看到:after/::after和:before/::before这样两种形式，那么:after 与 ::after 究竟有什么不同呢，下面让我们一起来了解下。

相同点

都可以用来表示伪类对象，用来设置对象前的内容。

:before和::before写法是等效的; :after和::after写法是等效的。

不同点

:before/:after是Css2的写法，::before/::after是Css3的写法。

:before/:after 的兼容性要比::before/::after好 ，不过在H5开发中建议使用::before/::after比较好。

注意

这些伪元素，要配合content属性一起使用。

这些伪元素，不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入。

这些伪元素的特效通常要使用:hover伪类样式来激活。

示例：当鼠标移在div上时，div前插入”8023″

<style>
div{
  background: yellow;
}
div:hover::before{
  content:"8023";
}
</style>

<div>8023</div>

👋 感谢您的观看！