: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>
本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!网站资源来自用户分享,如有侵权行为请联系网站客服处理。
二月繁华 » :after/::after和:before/::before的有何不同

发表评论

分享最优质的资源集合

了解详情