juniorCSS
What are CSS pseudo-classes vs pseudo-elements?
Updated Apr 28, 2026
Short answer
Pseudo-classes target an element's state (e.g., :hover), while pseudo-elements target a specific part of an element (e.g., ::before).
Deep explanation
Pseudo-classes like :focus, :active, or :nth-child style an element based on its current state or DOM position. Pseudo-elements like ::first-line or ::after effectively insert virtual elements into the DOM, allowing you to style parts of content without extra HTML tags.
Real-world example
Adding an icon before a list item using ::before, or highlighting a button on mouse hover using :hover.
Common mistakes
- Confusing the syntax (single colon vs double colon) or forgetting the 'content' property when using ::before/::after.
Follow-up questions
- Can you use animations on pseudo-elements?