Pseudo-Elements vs Pseudo-Classes
Pseudo-classes target existing elements in a specific state (:hover, :focus). Pseudo-elements create virtual sub-parts (::before, ::after) or target portions of content (::first-line).
CSS
Beginner
4 min read
Pseudo-Elements vs Pseudo-Classes
Example
/* Pseudo-class: targets the element in a state */
.btn:hover { background: darkblue; }
li:first-child { font-weight: bold; }
/* Pseudo-element: creates or targets a sub-part */
.btn::after { content: " →"; }
p::first-line { font-variant: small-caps; }
/* Key rule: pseudo-elements use ::, pseudo-classes use : */ Pro Tip
Remember: pseudo-elements create virtual elements or target rendered parts of text; pseudo-classes filter based on state or position.