CSS Pseudo-elements
Where as Pseudo-classes are used to style the different states of an element, Pseudo-elements are used to style specify parts of an element. This may include the first letter or line of element or insert an entirely new element all together. To help developers distinguished between the pseudo-classes and pseudo-elements, all pseudo-elements will be prefixed with two colons (::), whereas pseudo-classes will continue to have only one (:).
NOTE
Some older pseudo-elements, like ::before, will accept both one or two colons, but it is best practice to always use two. All newer pseudo-elements will only work with two.
While there are many experimental and non-standard pseudo-elements, the most commonly used standard pseudo-elements are:
::after(:after)::before(:before)::first-letter(:first-letter)::first-line(:first-line)::placeholder::selection
We will cover each of these pseudo-elements in more detail.