= CSS pseudo-element
{c}
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.<CSS Pseudo-Elements Module Level 4 by World Wide Web Consortium>[Abstract and introductory pseudo-element model]{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.<CSS Pseudo-Elements Module Level 4 by World Wide Web Consortium>[Typographic pseudo-elements, ::first-line; Generated Content, ::before and ::after]{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.
Back to article page
