::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

紫微前端

于 2022-03-23 08:49:47 发布

阅读量876

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签：前端面试

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/123676820

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文详细介绍了CSS中的`:before`和`:after`伪元素，包括它们的双冒号和单冒号的区别。`:before`用于在元素的内容前面插入内容，`:after`则用于在元素内容后面插入。双冒号（::）是W3C推荐的标准写法，而单冒号（:）是老版本浏览器的兼容写法。这两个伪元素在前端开发中常用于添加装饰性内容或布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上