Pseudoelement

In CSS, a pseudoelement is a keyword that can be added to a selector to style a part of an element or its generated content. Pseudoelements are not actual nodes in the document object model; they exist in the rendering tree and are created by the browser to apply decorative or structural styling without modifying the DOM.

The most common pseudoelements are ::before and ::after, which insert generated content before or after an element's content. The content property is required for these elements and can contain strings, counters, or image data via url(). Pseudoelements can be styled like real elements, including layout, color, borders, and positioning, and they participate in the element’s layout.

Older browsers used a single colon syntax (:before and :after). Modern CSS uses the double colon syntax to distinguish pseudoelements from pseudoclasses, though many browsers still support the older form for compatibility.

Other examples include ::first-letter, ::first-line, ::selection, and ::marker. Pseudoelements extend what can be styled without extra DOM nodes and are frequently used for decorative effects, icons, or typographic adjustments. They are commonly employed to insert cosmetic content, create non-intrusive indicators, or apply complex styling that would be awkward with markup alone.

Accessibility and compatibility: because pseudoelements do not exist in the DOM, rely on them for visual presentation rather than essential content; provide fallbacks when necessary. All modern browsers support the common pseudoelements; for older environments, the legacy :before and :after form may be required.