How to use CSS pseudo-classes :before and :after

The CSS :before and :after properties are what also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them.

The Syntax

If we have an element like this one:

<h2>welcome to our website</h2>

We can add a pseudo element before it using CSS, like this:

h2:before {
  content: “Hello“;
  color : blue;
}

The result will be:

This is a quite simple principle. You are adding content before or after a certain element. It can be extremely helpful when adding icons, clearing floats, and in many other cases.

The content property of the pseudo element can be left empty with empty quotes like this

`content: “”`

Adding Icons

Probably the most popular usage of the before and after pseudo elements is using them to add icons. We can add a simple .png icon.

Let’s look at the markup.

HTML

<h2>Weather report</h2>

CSS

h2:before {
  content: “ ”; 
  display: block;
  height: 15px;
  width: 25px;
  url: (‘images/icon.png’’);
  margin-right: 5px;

The result:

Now we have successfully added an icon before the text. Easy, right?

Clearing Floats

After elements are floated, another one needs to be added in order to clear that float. You can avoid adding a new element and simply using a pseudo one.

Let's say we have this situation:

We can use the next code to achieve clearing of the floats.

HTML

<div class="box-container">
  <div class=”box”></div>
  <div class=”box”></div>
</div>
<p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.</p>

CSS

.box-container:before,
.box-container:after {
  content: "";
  display: block;
}
.box-container:after {
  clear: both;
}

.box {
  height: 100px;
  width: 100px;
  background-color: #C98EED;
  margin: 5px;
  float: left;
}

Now, let's take a look at the result.

By using this method we are clearing the float and the paragraph is moved below the two elements.

Using a Background Image

We can also add a background image to a pseudo element. This is commonly used when styling a header.

HTML

<h2>Hello World</h2>

CSS

h2:after {
  content: “”;
  width: 100%;
  height: 30px;
  background: url(‘underline.png’) center center no-repeat;
  display: block;
}

The result achieved:

Browser Support

As with everything else in CSS, browser support needs to be checked. By consulting the CanIUse, we see that these pseudo classes have a high browser support (over 98%) and we won’t have a headache when using them.

Summary

Here, we have explained basic principles of the CSS pseudo elements. The examples illustrate just some of the many possible usages. Don't worry if it's not completely clear in the beginning. A little practice goes a long way.

Hopefully, this article will help with any future projects. Thank you for reading!

Previously published at https://kolosek.com/css-before-and-after/