content

The content property allows you to add content to your page automatically without changing the page itself. You might want to put the word “Figure“ before the caption of a figure, “Chapter n” before a title, a picture before every heading or do automatic numbering.

To automatically generate content, you need to:

• Specify what the content you want to include is
• Say where you want to put the content

To do this you use the content property together with the :before and :after pseudo-elements. The content property allows you to define the content that you want to insert before or after a tag. Content can be text, pictures, counters and quotation marks. The :before and :after pseudo-elements allow you to say whether you want to put the content before or after a tag.

For example, you can add a text string Note: before every paragraph with the class note:

p.note:before {content: "Note: ";}

You can include external content before or after any tag. If you enter a URL, the browser gets the content of that URL and puts it into your page.

For example, you can make the browser display a picture at the start of every first level heading:

h1.before {content: url(head.gif);}

If you include a sound file, the browser will play it. This makes it easy to include standard content before and after tags, and to store stuff you use a lot in a single place.

If you use the special attr value for the content property, you can retrieve and insert the value of any attribute associated with the current tag into your document.

If nothing else, this is a tremendous debugging tool. Suppose you are having a hard time getting things to align correctly in your document. By adding this rule, you can display the alignment of each paragraph in your document:

P:before { content: attr(align)}

Similar tricks will let you look at the attributes for table cells, picturess, and all those other tags that can be difficult to manage at times.

You might want to extract certain attributes to display to the user. For example, you can ensure that the alt text for your picture always appears:

img:before { content : attr(alt)}

You can also automatically generate numbers by creating a counter and using the properties counter-increment and counter-reset along with content. Here's a quick example:

h1:before {content: counter(chapter) ".";
           counter-increment: chapter ;}

This tells the browser to add the value of the counter called chapter before every level one heading and to increment the number by 1 each time.

It makes it easier to number chapters, sections and sub-sections because the numbering is automatic. You don't have to type it in and then remember to sort out the numbers when you move text around or delete bits of text.

Here's another example:

h2:before {content: counter(chapter) "."; 
           counter(subchapter);
           counter-increment: subchapter;}

The counter(subchapter) just sets up a variable name of subchapter for a <h2> tag. Every time the browser sees an <h2> tag, the value of subchapter is incremented by one (or whatever value you declare in the counter-increment property).

This would result in headings which look something like this:

<h2>Getting Started</h2>

1.2 Getting Started

If you want to set the value of a counter to a certain number, you would use counter-reset. This is a fairly complex topic.

The content property also works with the quote property to specify the opening and closing quotation marks. The following example tells the browser to insert opening and closing quotes around the <blockquote> tag:

blockquote:before {content:openquote;}
blockquote:after  {content:closequote;}

The quote property sets the actual quotation marks.

I can’t really try it out because the browsers don’t yet support any of this stuff.