:after/::after和:before/::before的异同

最新推荐文章于 2021-12-03 18:10:20 发布

檀小泡泡

最新推荐文章于 2021-12-03 18:10:20 发布

阅读量264

点赞数

分类专栏： CSS 文章标签： css3

原文链接：https://blog.csdn.net/b954960630/article/details/79575622

版权

27 篇文章 1 订阅

订阅专栏

相同点

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

不同点

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

注意

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

eg:当鼠标移在span上时，span前插入”111111”

<style>
span{
  background: yellow;
}
span:hover::before{
  content:"111111";
}
</style>

<span>222</span>

————————————————
版权声明：本文为CSDN博主「白小宇」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/b954960630/article/details/79575622

关注