Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

CSS wasn’t always as flexible as it is today. By using CSS pseudo-elements and pseudo-classes, designers can target elements based on their dynamic states or positioning in relation to other elements.

Pseudo-Elements and Pseudo-Classes

There are two types of pseudo selectors: pseudo-elements and pseudo-classes. Either of these pseudo selectors is intended to select objects for styling based not on their name or attributes but their current conditions. Consider a:visited as a canonical example. This pseudo-class selects all links that have already been visited, but that state changes over time. More links get visited as the users spends more time on the page. The pseud0-class’s selection grows dynamically in response to user actions.

In modern practice, the difference between pseudo-elements and pseudo-classes isn’t obvious. Classes are based on an objects state, while elements are based on the objects position. Classes should be prefaced with a double colon (::) while elements get a single colon. It’s also possible to use a single colon for everything which is also supported by CSS 2. There are also far fewer pseudo-elements compared to pseudo-classes.

Standard Pseudo-elements

The standard pseudo-elements are as follows. Click each to learn more about its functionality:

• ::after
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::selection
• ::slotted

Standard Pseudo-classes

The standard pseudo-classes are as follows. Click each to learn more about its functionality: