当前位置：二月繁华 > 编程技术 > :after/::after和:before/::before的有何不同
二月繁华二月繁华 编程技术

:after/::after和:before/::before的有何不同

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

  1. 都可以用来表示伪类对象，用来设置对象前的内容
  2. :before和::before写法是等效的; :after和::after写法是等效的

不同点

  1. :before/:after是Css2的写法，::before/::after是Css3的写法
  2. :before/:after 的兼容性要比::before/::after好 ，
    不过在H5开发中建议使用::before/::after比较好

注意

  1. 这些伪元素 要配合content属性一起使用
  2. 这些伪元素 不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
  3. 这些伪元素 的特效通常要使用:hover伪类样式来激活

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

1
2
3
4
5
6
7
8
9
10
<style>
div{
  background: yellow;
}
div:hover::before{
  content:"1234";
}
</style>

<div>333</div>
分享到：

相关推荐