xxxxxxxxxx
Pseudo class targets state e.g. hover, active, link.
Pseudo element targets parts of the elements that don't explicitly exist
or virtual elements e.g. first-letter, before, selection.
Basically, the pseudo class target exists, just need to modify its state.
A pseudo element does not exist and needs to be created.
xxxxxxxxxx
Difference between pseudo elements and classes:
=> pseudo element represent an actual part of DOM whereas pseudo classes
represents state of an element based on the user's interactions with it
=> pseudo elements use :: while classes use :