When to Use CSS content Property

05 Mar 2011

CSS offers a tempting attribute in the content property. The syntax is as follows:

content: 'Add this.';

The code above will append “Add this.” to the element, id or class of our CSS declaration. The problem with this is that we’re putting content into our presentation code. Also, this content is not accessible by screen readers or search engine crawlers. A good rule of thumb is to use this property as a means of progressive enhancement. Generally speaking, I like to use it for presentation that enhances the site, but contributes nothing semantically.

Here’s an example:

Let’s say we want to use this icon to denote links that are external to our site: external link icon

Use the content property:

	a.external:after {
	    content: url(path/to/external.png);
	}

The image itself provides no semantic value to the document. It’s merely an enhancement and would be ignored by screen readers anyway. We can safely use content in this case. Another good use is this tutorial for creating CSS-only arrows.