Since CSS 2.1 there have been CSS properties that allow you to insert content before or after a tag’s normal content. This offers some interesting capabilities. But when should you use this feature?
What is the content property
The CSS content property is a strange beast. It has been around since CSS version 2.1 but a lot of people don’t know what it is. It is a CSS property that allows you to insert content into an html tag, either before or after that tag’s actual content. For example, if you had a series of h1 tags:
<h1>Some more text</h1>
and you wanted to add the word “Section:” and a number before each one, you could choose to either edit your html code finding each tag and add the words, or as an alternative, you could use the CSS content and counter properties with the “:before” pseudo-element like this
counter-reset: section; /* initialize counter named section */
content: "Section: " counter(section);/* set the word and number */
counter-increment: section; /* increment the counter */
You can see the results of this in figure 1 below.
This raises some interesting questions and issues however. One of the key principals of CSS vs. HTML is the separation of content and presentation. This technique seems to violate that principal. But actually it technically doesn’t, in that the content is not actually added into the document. You can see this by using the Lynx browser (a text-based browser). Lynx is a good tool for seeing how your pages look to search engines and to screen readers. Below is an image of a page using the content property viewed in Firefox:
And here is the same page being browsed by Lynx
Firefox shows the added content, but Lynx doesn’t. Since Lynx doesn’t see or display the content text, this clearly shows that the content is not being added to the document, that the content is purely presentational. So what does that mean to the designer. Well it means that if you are concerned about accessibility then you have to think about accessibility when you want to use this technique.
It is a similar issue as using css background images. Those images do not use alt or title tags. So if the images are purely presentational and if not showing them would have no affect on the messaging that the user sees, then it is ok. Likewise with the CSS content property. If not showing the content doesn’t affect the messaging to the user, then it is okay. Otherwise you shouldn’t be using the technique.
Using counter and counters
Since there are a lot of good tutorials and resources on the web I am not going to duplicate them here. Instead here is a list of good articles:
- Technical specification from w3.org
While technical specifications are not the easiest to read, they are the most definitive source.
- Mozilla Developer Network article on Content property
Another technically oriented description, but it has some good examples as well. One of the article’s examples is illustrated in this list. The web addresses in parenthesis are inserted dynamically with the CSS content property.
- CSS Content | CSS -Tricks
More examples including how to use special characters in the content. Unlike HTML you don’t use character entities, but instead have to use the ASCII character code. The author describes this and gives you a link to a tool that helps figure out the correct codes.
- CSS Counters: counter-increment and Friends
Another good article with a very understandable description of the syntax.
Updated June 23, 2023 to replace missing content.