Web Solutions Blog: 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:

Standard Pseudo-classes

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

Our Favorite Examples

Using pseudo-elements and pseudo-classes, we can create some interesting styles with CSS. Here are some of our favorite examples.

Placing Content with ::after and ::before

After and before are used most effectively to place and generate content. With a snippet of CSS, you can place elements either after or before your selected object. Then, style and place the element to achieve the appropriate effect. It can be used to add contextual icons to text, print HTML next to links in your printing style sheet, or cleverly get around other styling problems. You can also style list numbers or create styled tool tips.

As example, consider placing text delimiters between navigation list elements:

.nav li:after {
  content: " * ";
  position: relative;
  top: 2px;
  left: -1px;
}

Creating Drop Caps with ::first-letter and :first-of-type

To produce interesting text styling effects, you can use the ::first-letter pseudo-element to select the first letter in a given element. But you don’t want that to apply to every instance of a paragraph in your text. You could apply a special class to your drop cap paragraph, but that’s hardly semantic and also annoying to code. Use :first-of-type to target only the first paragraph element on the page, ensuring your drop caps only appear in the first paragraph

p:first-of-type::first-letter {font-size: 1.5em;}

Styling Lists with :nth-child()

The nth-child selector is extremely flexible, capable of selecting an arbitrary number of child elements and following user-defined patterns. The selector takes a formula within its parentheses, allowing for an extremely specific method of determination. It follows the format (an+b) which isn’t as cryptic as it appears at first.

a is a multiplier, multiplying the value of n by its own value.
n counts up from zero. The first child element has an n of 1, the second has an n of 2, the third has an n of 3 and so on.
b is an integer that adds to or subtracts from the result of the an multiplication.

Alternatively, the specifications odd and even can be used in place of an+b to select odd and even children of the parent element.

For example, :nth-child(2n) will select every even element. :nth-child(2n+1) will select odd elements, and :nth-child(3n) will select every third child element. Specifications can also be made directly: :nth-child(4) will select the fourth child element.