What is the difference between a pseudo-class and a pseudo-element?

• A pseudo-class (:hover, :focus-visible, :nth-child, :has) matches an element in a given state.
• A pseudo-element (::before, ::after, ::marker, ::placeholder, ::selection) creates or targets a virtual sub-part of an element.

a:hover { text-decoration: underline; }
.card::after { content: ""; position: absolute; inset: 0; }

::before/::after need a content value to render at all, and don't work on replaced elements (img, input).