Adobe Creative Cloud

November 6, 2015 /Code /

Amazing :before / :after pseudo elements

I want to share a useful trick using pseudo elements to save you time on your projects. Pseudo elements can allow you to add content to your page by CSS without needing to change the HTML. The :before element will add content right after opening tag and before any nested elements (including the text) inside of the targeted element. The :after element will add content right before the closing tag and after any nested elements (including the text) inside of that element. Here is an example:

div:after {
    content: “hello”;
}

The value for content can be the following:

  • String : for example “hello”, it can also be an empty string (“”) which still creates an element – Should be unicode encoded.
  • Image: for example url(path/to/image.jpg) or any values that can be used for background-image including gradients – Images will be added with exact size and cannot be resized by CSS.
  • Counter: which will add the index of the nested elements.

Examples:

Clearfix

When we have floating left or right elements, we need to fix the clearing after them so the next element can be placed properly. Traditionally, we needed to add an extra element width “clear: both” css property to accomplish that. This can be done by adding the :after pseudo element and set “clear: both”. Ideally you can create a helper CSS class like .clearfix and add it to any elements that have floating nested elements:

.clearfix:before,
.clearfix:after {
    content: “”;
    display: block;
    clear: both;
}

Add a character or an icon to all links or labels of form elements

This may not be that useful for small projects with static pages, but when you work on projects that are created with a CMS such as WordPress or any kind of framework, there will be cases where you need to add a character to an element, for example you may need to add “:” after all labels of a form, modifying the template files may not be the fastest way to do that, this can be done easily by using the pseudo element:

label:after {
    content: “:”;
}

Or you may need to add a “>” to all anchor elements in the .content-area:

.content-area a:after {
    content: “>”;
}

Or add a pdf icon to all links with their href attribute value containing “.pdf”:

a[href*=”.pdf”]:before {
    content: url(path/to/pdf-icon.jpg);
}

You cannot resize the image added by the content property, if you need to do that just use:

content: “”;

This will create an empty element and use your image as a background of it, here is an example:

div:before {
    content: “”;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(path/to/image.jpg);
    background-size: cover;
}

Style an ordered list counter

You can disable the default style of the li tag then add the counter to the content property of the :before element, then style it with whatever you want. Here is a nice example, and below is another:

ol > li {
    list-style: none;
}

ol > li:before {
    content: counter(li);
    counter-increment: li;
    color: white;
    background; grey;
}

Note: Pseudo elements are not actually part of the DOM (Document Object Model), so you can not access them by JavaScript, for example you can not create a function and fire it up on an onclick event of a :before pseudo element. Also, it’s not a good idea to use them to add important content which will not be available for screen readers and search engines crawlers.

Hope this helped you to start using this amazing CSS3 feature.

Code