Over a million developers have joined DZone.

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 to add document editing and viewing to your web app on .Net (C#), Node.JS, Java, PHP, Ruby, etc.

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:


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.


<h2>Weather report</h2>


h2:before {
    content: “ ”; 
    display: block;
    height: 15px;
    width: 25px;
    url: (‘images/icon.png’’);
    margin-right: 5px;

The result:


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:


We can use the following code to clear the floats.


<div class="box-container">
    <div class=”box”></div>
    <div class=”box”></div>
<p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.</p>


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


<h2>Hello World</h2>


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, we see that these pseudo classes have a high browser support (over 98%) and we won’t have a headache when using them.


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!

Extend your web service functionality with docx, xlsx and pptx editing. Check out ONLYOFFICE document editors for integration.

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