CSS pseudo-element

A CSS pseudo-element represents an abstract styling target associated with an element, such as a typographic portion or generated content. Examples include ::first-line, ::before and ::after. It allows CSS to style parts of the rendering that need not be separate HTML elements in the ordinary document tree.^[ref]

For example, p::before { content: "Note: "; font-weight: bold; } can generate a bold prefix before a paragraph's content. The prefix participates in the rendering under the pseudo-element's rules, while the paragraph's ordinary text nodes remain unchanged. Reading the paragraph's textContent is therefore not a general way to recover every word a user sees on screen.

A typographic example is p::first-line. Which characters belong to the first rendered line depends on layout width, fonts and wrapping. Changing the width can move text into or out of that pseudo-element without inserting or deleting any DOM text nodes. Pseudo-elements also differ in which properties apply to them.^[ref]

A CSS pseudo-class instead adds a matching condition such as focus or sibling position. The visual similarity of their names does not make the two mechanisms interchangeable. Modern pseudo-element syntax uses a double colon; some older single-colon spellings persist for compatibility, so a spelling alone should be interpreted using the specified selector rules.