::before 和::after 中双冒号和单冒号有什么区别、作用？

参考答案：

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，可以继续使用 :after 这种老语法表示伪元素

• 单冒号（:）用于 css3 的伪类
• 双冒号（::）用于 css3 的伪元素

作用：::before 和 ::after 的主要作用是在元素内容前后加上指定内容。

另外，伪类与伪元素的区别有：

• 伪类与伪元素都是用于向选择器加特殊效果
• 伪类与伪元素的本质区别就是是否抽象创造了新元素
• 伪类只要不是互斥可以叠加使用
• 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
• 伪类与伪元素优先级分别与类、标签优先级相同

题目要点：

单冒号与双冒号

• 单冒号（:）: 用于伪类选择器，如 :hover、:focus 等。
• 双冒号（::）: 用于伪元素选择器，如 ::before 和 ::after。

::before 和 ::after

• ::before: 在元素的内容之前插入内容。
• ::after: 在元素的内容之后插入内容。

作用

• 内容生成：允许在元素的前后插入额外的内容，这些内容可以是文本、图片等。
• 样式控制：通过 CSS 控制这些插入内容的样式，如字体、颜色、位置等。

考察重点

• 理解：伪类和伪元素的区别。
• 应用：使用 ::before 和 ::after 生成内容并控制样式。