双冒号在 CSS 中是什么意思？

在CSS中，双冒号(::)用于表示伪元素。伪元素用于向某些选择器添加特定效果或样式，但并不实际存在于DOM结构中。这与伪类（如:hover）不同，伪类用于描述元素的特定状态。

双冒号的引入是在CSS3中，主要是为了区分伪类和伪元素。在CSS2中，伪元素如:before和:after是用单冒号表示的，但CSS3规范明确将伪元素的表示方式改为双冒号，即::before和::after。这样做的目的是为了让CSS的语法更加清晰和一致。

例子

假设我们有一个简单的HTML结构：

html
<div class="message">
    Hello World!
</div>

我们可以使用::before和::after伪元素来在这段文本之前和之后添加内容：

css
.message::before {
    content: "【";
    color: red;
}

.message::after {
    content: "】";
    color: red;
}

这段CSS将使得浏览器显示的内容看起来是这样的：

【Hello World!】

这里，::before和::after伪元素通过content属性插入了额外的文本，并且还可以通过CSS为这些伪元素添加更多样式，如颜色、字体大小等。这种方法常用于装饰性的文字添加、图标插入或清除浮动等。