What is the difference between :: and : in pseudo-elements?

The double-colon syntax (::before) distinguishes pseudo-elements from pseudo-classes, which use a single colon. For the four original pseudo-elements (::before, ::after, ::first-line, ::first-letter) the single-colon legacy form is still accepted for backwards compatibility.

Why is my ::before not showing?

::before and ::after only render if you set the content property — even an empty string like content: "" works. They also cannot be applied to replaced elements such as img or input, which have no content box for generated children.

Can you have more than one pseudo-element in a selector?

Traditionally a selector could end in only one pseudo-element. Newer specs allow chaining certain highlight pseudo-elements, but in practice you place each pseudo-element on its own selector and only ::before / ::after generate insertable content boxes.

How do ::slotted() and ::part() relate to shadow DOM?

::slotted() lets a shadow tree style elements that the light DOM assigns into its slots, while ::part() lets the outer page style elements a component exposes via the part attribute. Both are the sanctioned styling bridges across the shadow boundary.

What are the view-transition pseudo-elements?

When you run a View Transition, the browser builds a tree of pseudo-elements (::view-transition, ::view-transition-group(), ::view-transition-old() and ::view-transition-new()) holding snapshots of the old and new states. You target them to customize the cross-fade or slide animation.

CSS Pseudo-Elements Reference

This is a searchable reference for CSS pseudo-elements — the double-colon selectors that target a sub-part of an element or insert generated content. It spans the classic four (::before, ::after, ::first-line, ::first-letter), interface pseudo-elements like ::marker, ::selection and ::placeholder, shadow-DOM bridges, and the newer view-transition pseudo-element tree.

How it works

A pseudo-element is written with two colons followed by a keyword. Conceptually it lets you style something that is not a real element in your markup: the first letter of a paragraph, the bullet of a list item, the placeholder text in an input, or a fresh box of generated content. The generates column distinguishes the two kinds. ::before and ::after are generative — they create new boxes that only appear when you set the content property (use content: "" for purely decorative boxes). The rest are not generative — they hook into an existing sub-part such as ::first-line, ::marker or ::placeholder and only a restricted set of properties applies to each.

Tips and notes

Generative pseudo-elements cannot be placed on replaced elements like img, br, input or iframe, because those have no content box to host children. ::first-letter honours leading punctuation and is the standard way to build a drop cap. ::marker only accepts a handful of properties (color, font, content) — set list-style-type or its content to change the bullet. For shadow DOM, ::slotted() styles from inside the component while ::part() styles from outside, giving deliberate, contract-based theming hooks.

Example

/* Decorative quote marks */
blockquote::before { content: "\201C"; font-size: 2rem; }

/* Custom list bullet color */
li::marker { color: rebeccapurple; }

/* Style placeholder text */
input::placeholder { color: #999; font-style: italic; }

Everything runs in your browser; nothing you search is uploaded.

CSS Pseudo-Elements Reference

Email me this result

How it works

Tips and notes

Example