Using pseudo-class and the pseudo-element we can manage virtual states and element. These two can be essential and helpful when we style our elements in CSS.

Pseudo-class

The pseudo-classes are transition states attached to an HTML element. The most popular one is :hover which is used to style the hover states of our links (or any other HTML element).

:hover
:active
:focus
:checked

As you see with this, we can manipulate our elements on different events like hover or focus. For a more concrete list go to MDN!

Pseudo-element

The pseudo-element is not a state but an element. It is part of an HTML element but invisible until you style it with CSS. The most popular ones are ::before and ::after; these two is helpful because we can expand our elements and can manage up to three layers in a single item.

::first-line
::placeholder
::before
::after

For a better list check out Codrops Reference!

Marking the Different Types

As you see the difference between the two type of selector is an additional colon which can be bothering. You may also know that the ::before and the ::after even usable and operate with just one colon.

At first, the pseudo-elements operate with one colon, but it was misleading – because of the older state ones – so the standard was changed to use two colons. But because of the legacy codes, the vendors accept the one colon versions too.

For the best result use the proper notation for each type!

Summary

It is a tiny part of the HTML and CSS specs but still impressive. It is also a less known one. Misusing these are handled well by the browsers, but again, it is nice to know.