What does an "&" before a pseudo element in CSS mean?

在 CSS 中，伪元素前的“&”符号实际上并不是一个标准的 CSS 语法。但是，如果您在使用 CSS 预处理器，比如 Sass 或 Less 时，这个“&”符号扮演了一个非常重要的角色。

在 Sass 或 Less 中，“&”符号代表父选择器的引用。它用于在嵌套规则中引用父级选择器，使得开发者可以构造更复杂的选择器。这样做有助于保持 CSS 的可维护性并提高其复用性。下面是一个具体的例子来展示其用法：

scss
.parent {
    color: black;
    &::before {
        content: "前缀";
        color: gray;
    }
}

在这个例子中，.parent::before 是通过使用“&”符号来构造的，它实际上展开为：

css
.parent::before {
    content: "前缀";
    color: gray;
}

这里，“&”符号就被用来引用 .parent 这个父选择器，并且添加了 ::before 这个伪元素。这种方式非常有用于当你需要在一个选择器内部创建特定的伪类或伪元素规则时，而不需要重复书写整个选择器路径。