css

CSS :before and :after

Tatjana B.

3 min read

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:

before_add_element

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 .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:

before_add_icon

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:

after_clear_float

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.

after_float_cleared

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:

after_add_background

Browser Support

As with everything else in CSS, browser support needs to be checked. By consulting the Can I Use service, 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. Dont'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!

If you liked this article be sure to subscribe to our newsletter for more great content!

Creating
software solutions
that work

Explore topics

css

ruby on rails

web design

examples