What are CSS pseudo-classes and pseudo-elements?

Pseudo-classes target elements in a particular state, using a single colon: :hover (mouse over), :focus (has keyboard focus), :active (being clicked), :visited (link visited), :nth-child(n) (positional), :checked (checkbox/radio selected), :disabled. Pseudo-elements target a specific part of an element, using double colons: ::before (inserts content before the element's content), ::after (inserts content after), ::first-line (first line of text), ::first-letter, ::placeholder. The ::before and ::after pseudo-elements are widely used for decorative effects and require a content property to render.