Pseudo classes allow you to select elements based on things other than document structure, e.g. if something is being hovered over.
Pseudo elements allow you to select certain parts of an element, or even add new content to the element.
In CSS 2 pseudo elements used a single : prefix, but CSS 3 changed this to be :: to more
easily distinguish them from pseudo classes.
The most unique pseudo elements are the ::before and ::after elements. These allow you to
add extra content to the page that is not defined in the document. The content will interact with other boxes as if
they were real element on the page. The content is added as the first (for ::before) or last
(for ::after) child of the element the style is applied to. See below for examples.
References: