What does the double colon (::) mean in CSS?

In CSS, the double colon (::) is used to denote pseudo-elements. Pseudo-elements are used to add specific effects or styles to certain selectors, but they do not exist within the DOM structure. This differs from pseudo-classes (such as :hover), which describe specific states of elements.

The double colon was introduced in CSS3 primarily to distinguish between pseudo-classes and pseudo-elements. In CSS2, pseudo-elements like :before and :after were denoted with a single colon, but the CSS3 specification explicitly changed the notation for pseudo-elements to double colon, i.e., ::before and ::after. The purpose was to make CSS syntax clearer and more consistent.

Examples

Assume we have a simple HTML structure:

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

We can use the ::before and ::after pseudo-elements to add content before and after this text:

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

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

This CSS will cause the browser to display content that appears as:

【Hello World!】

Here, the ::before and ::after pseudo-elements insert additional text via the content property, and additional styles can be applied using CSS, such as color and font size. This method is commonly used for adding decorative text, inserting icons, or clearing floats.