Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS: :before and :after

DZone's Guide to

CSS: :before and :after

Take a look at how to use CSS's :before and :after pseudo elements with the help of some handy examples like adding icons and clearing floats.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

The CSS :before and :after properties are what are 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. 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 by simply using a pseudo one.

Let's say we have this situation:

after_clear_float

We can use the following code to clear 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. 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!

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
css ,html ,web dev ,elements ,properties ,before and after ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}