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.

Do you have any questions, recommendations, thoughts, advice or tip you would like to share with other readers of this blog, and me? Please share it in a comment. You can also send me a mail. I would love to hear from you.

Did you like this article? Please subscribe.

Are you on social media? Let's connect! You can find me on Twitter, GitHub and Dribbble.

Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

2 Comments

  1. Reblogged this on Amir Naeem and commented:
    Informative

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: