::before 和 :after 的双冒号和单冒号有什么区别？

• 单冒号 :：用于表示伪类，例如 :hover、:focus、:nth-child() 等。
• 双冒号 ::：用于表示伪元素，例如 ::before、::after、::first-line、::first-letter 等。

::before 和 :before 的区别

在早期的 CSS 规范中，伪类和伪元素都是使用单冒号 : 语法。为了解决这个问题，并清晰地区分伪类和伪元素，从 CSS3 开始，规范建议使用双冒号 :: 来表示伪元素，以便区分伪类和伪元素。然而，为了向后兼容，浏览器仍然支持使用单冒号表示伪元素。

使用单冒号表示伪元素（旧语法）：

/* 旧语法 */
element:before {
  content: "Before content";
}

element:after {
  content: "After content";
}

使用双冒号表示伪元素（新语法）：

/* 新语法 */
element::before {
  content: "Before content";
}

element::after {
  content: "After content";
}

伪类与伪元素的区别

• 伪类（Pseudo-class）：伪类用于选择处于特定状态的元素，例如鼠标悬停状态（:hover）、表单元素聚焦状态（:focus）、第一个子元素（:first-child）等。
• 伪元素（Pseudo-element）：伪元素用于选取元素内容的特定部分，或生成虚拟的元素。例如，::before 和 ::after 用于在元素内容之前或之后插入内容，::first-line 选择元素的第一行，::first-letter 选择元素的第一个字母等。

实践中使用

虽然现代浏览器都支持双冒号 :: 表示伪元素，但在某些老旧的浏览器中，可能还需要兼容性处理。因此，在实际开发中，你可能会看到同时使用单冒号和双冒号的写法以保证兼容性：

/* 兼容性写法 */
element:before,
element::before {
  content: "Before content";
}

element:after,
element::after {
  content: "After content";
}

总的来说，现代 CSS 开发中推荐使用双冒号 :: 来表示伪元素，这是规范化的做法。