Style what's happening
Buttons should react when you hover or focus them. Every other table row could be shaded. A little arrow could decorate links — without extra HTML. Pseudo-classes and pseudo-elements do all this.
Pseudo-classes and pseudo-elements
- States: :hover, :focus-visible (keyboard focus), :active, :disabled, :checked, :invalid.
- Position: :first-child, :last-child, :nth-child(odd), :nth-child(3n).
- ::before / ::after add decorative content with the content property. ::placeholder styles placeholder text.
- Never remove focus outlines without a visible replacement — keyboard users need them.