CSS Pseudo-elements

Where as Pseudo-classes are used to style the different states of an element, Pseudo-elements are used to style specific 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 distinguish 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.