pseudoélément

The pseudo-element is a CSS feature that allows styling a portion of an element's rendered content without requiring changes to the actual document structure. Pseudo-elements are selected with specific keywords appended to a selector, and they behave as if they were additional, but virtual, child boxes.

The modern syntax uses a double colon, as in ::before and ::after, though older documents may still use a single colon (:before, :after) for compatibility. Common pseudo-elements include ::before, ::after, ::first-line, ::first-letter, ::selection, and ::marker.

The ::before and ::after pseudo-elements create anonymous boxes placed before or after the element's content. They typically rely on the content property to display text or images. The content property can insert strings, counters, images via url(), or even generate empty boxes.

They participate in layout like normal elements; their display type (inline, block, etc.) affects flow. For example, p::first-line can alter only the first line's styling, while p::first-letter can enlarge the initial character.

The pseudo-element must be used on elements that can generate content; some elements (like replaced elements) may not support certain pseudo-elements. Cross-browser compatibility notes: all modern browsers support most pseudo-elements; CSS3 introduced the double-colon syntax, while some legacy implementations require the single-colon form.

Pseudo-elements are distinct from pseudo-classes. Pseudo-classes select elements based on state or position (e.g., :hover, :nth-child(2)). Pseudo-elements define a sub-part of an element's rendering.