What's the difference between :hover and ::before? When do you use each, and what's with the colons?
Whether you distinguish selecting by STATE from generating/styling a sub-part.
A pseudo-CLASS selects an element based on its STATE or position: :hover, :focus, :active, :visited, :checked, :disabled, :first-child, :nth-child(2n), :not(.x), :is()/:where(). It targets an element that already exists in the DOM. A pseudo-ELEMENT lets you style or create a specific SUB-PART of an element that isn't its own node: ::before and ::after inject generated content (they require a content property, even content: ''), ::first-line, ::first-letter, ::selection, ::placeholder, ::marker. Convention: pseudo-classes use one colon, pseudo-elements use two (::) to tell them apart — though browsers still accept the old single-colon form for the original four pseudo-elements. Common uses: :hover/:focus for interactive feedback (always pair :hover with :focus for keyboard users), :nth-child for zebra striping, ::before/::after for decorative icons, badges, clearfix, and tooltips — purely visual bits that shouldn't clutter the HTML. Generated content from ::before/::after is not selectable text and is largely ignored by assistive tech, so never put meaningful content there.
Interactive states (:hover/:focus), striping/positioning (:nth-child), and decorative content (::before/::after).