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

In CSS, the "&" symbol before pseudo-elements is not part of standard CSS syntax. However, when using CSS preprocessors like Sass or Less, the "&" symbol plays a crucial role.

In Sass or Less, the "&" symbol represents a reference to the parent selector. It is used to reference the parent selector within nested rules, enabling developers to create more complex selectors. This approach helps maintain CSS maintainability and improve reusability. Here is a specific example demonstrating its usage:

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

In this example, ".parent::before" is constructed using the "&" symbol, which effectively expands to:

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

Here, the "&" symbol is used to reference the parent selector ".parent" and add the pseudo-element ::before. This approach is very useful when you need to create specific pseudo-classes or pseudo-element rules within a selector without repeating the entire selector path.