CSS tips and tricks #4-before and after pseudo elements tutorial

Today we will take a look at :before or ::before and :after or ::after pseudo elements or selectors you can use in your CSS stylesheet. The difference between single and double-colon syntax is that single-colon is from CSS2.1 and double-colon is from CSS3 and not supported by IE8. Fortunately, all browsers support at least the single-colon version. Both of these elements are used right through appending to element you want to style. For example:

CSS:

div:before {}
div:after {}

What these elements do is generating content around the element you selected. In example above, we would generate content around this div element. To define what content do we want to generate, we use “content” property.

CSS:

.header:before {
 content: “”;
}
.header:after {
 content: “”;
}

Available values for content property are string, image, counter, nothing (“”). String can be anything, from one character to paragraph. If you want to use some special characters, you will need to insert its unicode entity. In case of image, it is inserted in its original resolution and cannot be resized. You can also use “content” property to display gradients. Keeping content empty is often used by web designers to style particular elements without adding another elements into HTML code. For example, in one of previous tutorials we used :before element to change default styling of a checkbox.

HTML:

<label for="human-check">I am human:</label>
<input type=”checkbox” name=”human-check” id=”human-check”>

CSS:

input {
 position: relative;top: 1px;
}
input:before {
 content: "";
 position: absolute;
 top: -.05em;
 left: -.05em;
 width: 1.5em;
 height: 1.5em;
 background: #e9e9e9;
 border-radius: 4px;
}
input:checked:before {
 content: "f00c";
 width: 1em;
 height: 1em;
 font: 1.5em 'fontAwesome';
}

Code above use :before element to create new grey square and covers the default checkbox with it by modifying its position. After this, the :before selector generates new content – character from Font Awesome stylesheet when box is checked.

The last option available as a value for “content” was counter. You can use this value alongside with “counter-increment” property to generate numbers around various elements. For example, you can use it with list to redefine the default count and create your own:

HTML:

<ol>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
</ol>

CSS:

ol {
 counter-reset: li;
 position: relative
}
li:before {
 content: counter(li);
 counter-increment: li;
 position: absolute;
 top: -2px;
 left: -2em;
}

Another way to use empty value of “content” property is for clearfixes.

Summary

:before and :after pseudo elements can be very useful tool for your web design projects. They can be a little bit trickier to understand at first, but learning how they work will bring you benefits in the future.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal