css 伪元素::before 和:before 差别

CSS 伪元素 ::before 和 :before 的核心区别在于语法规范与浏览器兼容性：::before 是 CSS2.1 引入的伪元素标准写法，而 :before 是旧版伪元素写法。在现代浏览器中两者功能完全一致，但在 IE8 及以下版本中 :before 才能生效，建议直接使用双冒号 ::before 以符合 W3C 标准。

::before 和 :before 有什么区别？

结论：两者的本质区别在于冒号的数量，:: 代表伪元素，: 代表伪类，且前者对 IE8 兼容性更好。

在 CSS 规范中，双冒号 :: 专门用于伪元素，单冒号 : 用于伪类。虽然现代浏览器对两者一视同仁，但在 IE8 及更早版本中，只有单冒号写法能被识别。为了代码的健壮性和标准性，开发者应优先使用 ::before，若需兼容老旧浏览器，可混写为 *:before（通配符兼容写法），这样浏览器会自动忽略不认识的 ::，仅执行单冒号规则。

如何使用 ::before 和 :before 在内容前添加元素？

结论：使用 content 属性定义要显示的内容，这是使用伪元素必须设置的属性。

要让 ::before 生效，必须在样式中定义 content 属性。例如，为所有标题添加一个星号前缀，代码如下：

h2::before {
    content: "★ ";
    color: #ff0000;
}

注意，如果省略 content 属性，伪元素将不会在页面上渲染出任何内容。此外，content 属性非常强大，它支持插入纯文本、Unicode 字符（如 ❤）、图片（通过 url() 函数，如 url('icon.png')）或元素的属性值（如 attr(title)）。

::before 和 :before 常见应用场景是什么？

结论：常用于图标装饰、文本前缀添加以及清除浮动等布局辅助。

最常见的应用是添加图标。比如在列表项前插入箭头，代码如下：

li::before {
    content: "➤ ";
    color: blue;
}

另一个常见用途是清除浮动，这是老版本开发中常用的技巧。通过 ::before 设置 content: ""; display: table; 来撑开父容器高度，确保浮动元素能被父级包裹。此外，还可以利用它来为链接添加“新”标签（如 content: "New";）或为图片添加水印，从而减少 HTML 标签数量，提升页面结构语义化。