What Are :before and :after Pseudo Elements?
Tags: css, webdesign
Published: 2018-05-22 09:42:42

---
title: What Are :before and :after Pseudo Elements?
published: true
description: These pseudo-elements are used to add a content before or after a certain element. There are multiple ways to use them and I am going to mention some of them. 
tags: CSS, web design.
---
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: 

![before_add_element](https://kolosek.com/content/images/2018/03/before_add_element.png)

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](https://kolosek.com/css-clear-float/)**, 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: 

![before_add_icon](https://kolosek.com/content/images/2018/03/before_add_icon.png)


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

##Clearing Floats

After elements [are floated](https://kolosek.com/css-float/), 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: 

![after_clear_float](https://kolosek.com/content/images/2018/03/after_clear_float.png)

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. 

![after_float_cleared](https://kolosek.com/content/images/2018/03/after_float_cleared.png)

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:

![after_add_background](https://kolosek.com/content/images/2018/03/after_add_background.png)

##Browser Support

As with everything else in CSS, browser support needs to be checked. By consulting the [Can I Use](https://caniuse.com/#search=%3Abefore) 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](https://kolosek.com/css-before-and-after/?utm_source=dvt).