Pseudo-classes and pseudo-elements

Pseudo-classes select an existing element in a state or structural position:

a:hover { text-decoration-thickness: 3px; }
button:focus-visible { outline: 3px solid; }
li:first-child { font-weight: bold; }

:hover is useful feedback, but it must not be the only way to reveal an action: touch and keyboard users may never hover. Use :focus-visible for a clear keyboard focus indicator, and do not remove the browser outline without an equally visible replacement.

State should agree with HTML behavior. A disabled-looking button should use the disabled attribute so button:disabled reflects a real interaction state. A group can use :focus-within when any descendant owns focus.

Pseudo-elements select or create a part of an element:

.external-link::after {
  content: " ↗";
}

::before and ::after are useful for decorative additions. Essential information should remain in HTML because generated content can be unavailable to assistive technology, copy operations, or reading modes.

Pseudo-classes use one colon. Modern pseudo-elements use two. Inspect the Elements panel: browsers show generated pseudo-elements even though they are absent from the HTML.

Exercise the states without a mouse. Tab to the control, activate it, disable it, and emulate touch input. If meaning exists only in :hover or generated content, move that meaning into the document.