Pseudoelements

Pseudoelements are a CSS feature that allows styling and inserting content around an element’s actual content without modifying the document structure. They are part of the rendered box model but do not correspond to real nodes in the DOM, making them useful for decorative or supplementary content added purely through CSS.

The most common pseudoelements are ::before and ::after, which insert generated content before or after an element’s content. In CSS2 this was written as :before and :after; CSS3 introduced the double-colon syntax to distinguish pseudoelements from pseudos. Modern practice prefers ::before and ::after, though many browsers still support the legacy single-colon forms for compatibility.

Usage centers on the content property, which defines what the pseudoelement renders. Example: .note::before { content: "Note: "; font-weight: bold; }. Pseudoelements can be styled with color, fonts, backgrounds, borders, and layout properties, including display, margins, and positioning. They can be used to insert icons, decorative quotes, counters, or separators. They cannot host real child elements and do not appear in the DOM, though they influence the element’s visual presentation.

Limitations and accessibility considerations include the fact that content generated by pseudoelements is not part of the document's semantic structure. If a pseudoelement conveys essential information, ensure it is available in the DOM or provide an accessible alternative. Pseudoelements are widely supported in modern browsers and are a common tool for non-structural styling.