DEV Community

Nesha Zoric
Nesha Zoric

Posted on

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:

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

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:

after_clear_float

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

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

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.

Top comments (7)

Collapse
 
maxart2501 profile image
Massimo Artizzu • Edited

Unless you're targeting IE8 without Autoprefixer or similar processor, please use the syntax with two colons: ::before and ::after.
The single colon syntax is for pseudo classes, while the double colon is for pseudo elements.

Anyway, another nice use? Triangles!

h2::before {
  content: "";
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent currentcolor;
}

Triangles are just some basic shape, you can actually have some fun with them. And it's still a legit use as they're still decorations.

Collapse
 
patrickcole profile image
Patrick Cole

Thanks for pointing this out Massimo! I guess I had not picked up on the fact that the double colon was the updated spec for pseudo elements. Definitely helped me understand the difference between the pseudo elements and pseudo classes!

Collapse
 
neshaz profile image
Nesha Zoric

Hey, Massimo! Yes, I agree, triangles are very interesting. This article was focused on the basic usage of :before and :after element, but triangles are indeed a great example. Thanks! :)

Collapse
 
maxfontana90 profile image
maxfontana90

I think it's worth to mention that this could bring accesibility issues to your webpage. Imagine you have a class like the following:

.required::after {
content: "*";
}

that is intended to be used in form inputs to highlight those that are mandatory. The approach would prevent accesible guests to be aware of which fields are required, since the * symbol has a contextual meaning.

Collapse
 
neshaz profile image
Nesha Zoric

Thanks for mentioning it! Because of accessibility issues, the usage of these pseudo elements should definitely be well planned.

Collapse
 
gsonderby profile image
Gert Sønderby

I've recently used :before and :after pseudo-elements on nested unordered lists and their items to create a tree view. Works really well!

Collapse
 
millebi profile image
Bill Miller

Note: For those with accessibility concerns the :before and :after are regularly not "properly" processed for screen readers, etc...