Using CSS Generated Content

April 21, 2014 | 7 Minute Read

Back in the good ol' days, CSS was much more limited than it is today. If we needed to style something it had to be in the page which, in turn, led to bloated markup simply for design purposes. Luckily we are no longer in those days.

CSS Generated Content is one of many advancements in CSS that allows us to do more with less. It has been around for some time now and has good browser support so if you’re not using it you may want to consider it.

What is CSS Generated Content?

CSS Generated content is just content that is not actually in the markup and is not actually part of the DOM. It’s added using the CSS content property via the ::before and ::after pseudo elements providing two additional items for every element in the page that can be styled.

You Can Leave Them Empty

If you need to use the ::before and ::after pseudo elements for styling purposes only you can just add them and leave the content property empty.

p img {
    float: right;
}

p:after {
    border-top: solid 1px red;
    content: '';
    clear: both;
    display: block;
}

<p>
    <img src="img.jpg" alt="" width="150" height="150" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
</p>

Using CSS Generated Content to Clear Floats Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus

You Can Use Static Text

If you want to add static text before or after elements you can simply set a text string value on the content property.

a:before {
    border: solid 1px red;
    content: '(.doc) ';
}

<a href="word-document.doc">A Word Document</a>

A Word Document

You Can Use Dynamic Attribute Values

If you have attributes on elements you can output their values before or after them.

a:after {
    border: solid 1px red;
    content: " ("attr(href)")";
}

<a href="https://briantree.se">My Website</a>

My Website

You Can Use CSS Counters

You can generate cool customized listings using CSS Counters. To learn even more about them you can check out my previous article “Make it Count with CSS Counters”.

.tableOfContents ol { 
    counter-reset: tcCount; 
    list-style: none; 
} 

.tableOfContents li:before { 
    border: solid 1px red;
    counter-increment: tcCount; 
    content: counters(tcCount, "."); 
    display: inline-block; 
    margin-right: 20px; 
    text-align: right; 
    width: 80px; } 

.tableOfContents > ol > li:before { 
    border: solid 1px red;
    content: "Part " counter(tcCount); 
} 

.tableOfContents > ol ol { 
    font-size: 75%; 
    margin-bottom: 20px; 
}

<ol>
    <li>
        This is the 1st Part
        <ol>
            <li>This is a section</li>
            <li>This is a section</li>
            <li>This is a section</li>
        </ol>
    </li>
    <li>
        This is the 2nd Part
        <ol>
            <li>This is a section</li>
            <li>This is a section</li>
            <li>This is a section</li>
        </ol>
    </li>
    <li>
        This is the 3rd Part
        <ol>
            <li>This is a section</li>
            <li>This is a section</li>
            <li>This is a section</li>
        </ol>
    </li>
</ol>

This is the 1st Part
1. This is a section
2. This is a section
3. This is a section
This is the 2nd Part
1. This is a section
2. This is a section
3. This is a section
This is the 3rd Part
1. This is a section
2. This is a section
3. This is a section

You Can Do More: CSS Generated Content Values

With the content property you can do more than what I’ve mentioned in this article. There are several values that can be used with the property.

none

When setting content to none the pseudo elements will not be generated

normal

This is the default value and equals a value of none for the pseudo elements

string

This creates static text content for the pseudo elements

uri

This links to an external resource like an image

counter

This specifies incremented counters for each item in the group of matched elements

attr

This displays the value of the attributes on the matched elements

open-quote | close-quote

This displays the proper open or close quote for the matched elements

no-open-quote | no-close-quote

This does not render any content but continues to increment the nesting of quotes

When Not To Use CSS Generated Content

The content property is powerful but just like everything else it can easily be used in ways that it shouldn’t be. As I mentioned above CSS Generated Content is not part of the DOM so it should not be used to add any content that would need to be accessible in the absence of CSS. This means that any sort of body copy, button text, form labels, or anything similar should not be added using the content property.