More To Know About CSS Content Property

CSS content property is used to generate text content in a document. The generated content is not to be mistaken as a part of document, but it is just used to add more meaning to actual HTML content.

According to W3C spec, content property can only be used in context of pseudo elements :before and :after, but browser like Safari, Chrome and Opera have implemented it for all context.

Example:
/* Example from W3C */

h1:before { 
    content: "Chapter: ";
    display: inline;
}

The above example causes the word Chapter to be added before each h1 element.

Apart from the text value(), the content property even have some less known magic values like attr, uri and counter.

  • open-quote and close-quote - same as name suggest, adds open and close quotes to element.
  • no-open-quote and no-close-quote - Introduces no content, but increments (decrements) the level of nesting for quotes.
  • uri - external resources url, possibly an image.
  • counter - element position in the given scope.
  • attr(X) - value of attribute X of the element.

Many of us are aware of first two values above, but I bet you didn't knew about the rest 3 values. Let's talk about each one of them.

content: url()
.contact-num:before {
    content: url(http://path/to/phone_image.png);
    width: 20px;
}

This will insert phone_image.png before each element having class contact-num. This technique is generally used to dispay icons before elements.

content: counter(, )

To use counter value for content property we need some extra properties to define the counter scope and the counter increment value. This is done using counter-reset and counter-increment property respectively.

#demo {
    counter-reset: wishlist;
}
#demo a {
    counter-increment: wishlist;
}
#demo a:before {
    content: counter(wishlist, upper-roman);
}

In the above example, we first reset our counter at element #demo and then for each #demo a element we increment our counter by 1, this incremented valus is then displayed before each A element using pseudo tag :before . CSS Animation API Animatable use this approach. Here we are displaying numbers in upper-roman format, but we can even use decimal format.

Apart from regular counter value for content propert you can even use it's variant called counters. Learn more about counters.

content: attr(X)
.meta-info:before {
   content: attr(data-cap);
}

and the HTML goes as...

<span class="meta-info" data-cap="Date:">2nd Nov 2011</span>

The above example will add Date: before the span element. It will then render as Date:2nd Nov 2011.

This value can be very well used to generate custom tooltips for links based on the links title attribute. Such an example is mentioned on CSS Tricks - CSS Content. You can even have multiple counters as mentioned on this page.

Bells & Whistles

Just like CSS background property, the content property also accepts multiple values.

/* Example from MDN */

a:before {
    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
    font: x-small Arial,freeSans,sans-serif;
    color: gray;
}

Compatibility

IE6, IE7 doesn't at all support this property, while almost all latest versions of Firefox, Chrome, Safari supports content property. IE8+ supports this property. Another point of note is that Opera, Safari and Chrome also supports content property in context other than :before and :after.

References

This entry was published on 2nd Nov, 2011.