Pseudo-class versus pseudo-element in CSS

WHAT THIS TESTS This checks precise understanding of two often-confused selector mechanisms and whether you grasp that one selects whole elements by state while the other styles parts that do not exist as real DOM nodes. It also probes accessibility awareness around generated content.

A GOOD ANSWER COVERS A pseudo-class selects an element based on a state or relationship it is in, not its name: examples include :hover, :focus, :checked, :nth-child, and :disabled. It uses a single colon. A pseudo-element lets you style a specific part of an element or insert a generated sub-element that has no markup: examples include ::before, ::after, ::first-line, ::first-letter, ::selection, and ::placeholder. The modern syntax uses double colons to distinguish it from pseudo-classes, though browsers tolerate single colons for the legacy four. Crucially, content injected by ::before and ::after is generated, decorative, and largely invisible to assistive technology and copy-paste.

COMMON WRONG ANSWERS Claiming the double colon is purely cosmetic or interchangeable in all cases. Saying ::before content is part of the DOM or is reliably read by screen readers. Confusing :first-child (a pseudo-class about position) with ::first-letter (a pseudo-element about a sub-part).

LIKELY FOLLOW-UPS Why must ::before and ::after have a content property to render? Can pseudo-elements be focused or clicked reliably? Why should you avoid putting meaningful text in generated content? How do ::before and ::after interact with flexbox as pseudo flex items?

ONE CONCRETE EXAMPLE To add a decorative quotation glyph before a blockquote, you write blockquote::before with content set to an open-quote character and styling. This keeps the markup clean and avoids a non-semantic span; you could not get this purely decorative, easily themeable mark from plain HTML without adding clutter that does not belong in the document structure.