What Are :before and :after Pseudo Elements?

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 so let's explore some of them.

The Syntax

If you have an element like this one:

<h2>welcome to our website</h2>

You 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: “”. This way you can treat the pseudo element like a box with no content. If the content property is removed altogether, the pseudo element will not work.

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 icon 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 you 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 you have this situation:

You 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 you are clearing the float and the paragraph is moved below the two elements.

Using a Background Image

You 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 Can I Use service, you can see that these pseudo classes have a high browser support ( over 98% ) so you won’t get a headache when using them.

Summary

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

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

This post is originally published on Kolosek Blog.