Categories:

Regular string content

Adding string content is done by wrapping the string in quotation after the keyword "content:"

.headers:before{
content: ":: ";
color: red;
}

<h3 class="headers">This is header 1</h3>
<h3 class="headers">This is header 2</h3>
<h3 class="headers">This is header 3</h3>

Example:

This is header 1

This is header 2

This is header 3

The characters "::" is dynamically prefixed to class="headers" elements with the above. Ain't it cool? Currently only literal string content is supported in CSS2- if you try and include HTML code, for example, it will be output literally instead of interrupted first. Generated content is not considered actual content, and hence doesn't alter the document tree, for those of you who work with the DOM.

Formatting the string content

If your string content contains quotations, they need to be back slashed to prevent clashing with the main surrounding quotation:

P:before, P:after{content: "\""; font-size: 110%;}

If you don't see it yet, the above example adds an opening and closing quotation mark to paragraphs.

If your string content is very long and you wish to insert a line break when it's displayed, you'll need to use the escape sequence "\A":

P:before{content: "Line1 \A Line 2 \A Line 3 \A"};

Note that when tested, Firefox 1.0 doesn't yet seem to recognize "\A", while Opera 7.5+ does.

Image content (embedded objects)

The two pseudo-classes ":before" and ":after" also allow you include images or other forms of embedded objects (ie: a midi file) through a URI syntax. Lets say you want all external links on a page to be accompanied by an arrow image to indicate they point to outside sites. I'll just assume here any link with a "target" attribute present means it's an external link:

a[target]:after{
content: url(arrow.gif)
}

<a href="http://www.dynamicdrive.com" target="_new">DHTML</a>

Example (simulated):

DHTML

Image and string content together

Some of you may already be wondering- "can I include both string and image content?" Absolutely. Simply wrap your strings in quotations and your embedded objects such as images using the URI syntax. Lets modify the above example so there is a space between the link and the generated image that follows it:

a[target]:after{
content: " " url(arrow.gif)
}

Other types of embedded objects

Now, to be technically correct, the URI syntax supports embedded objects with which image is just one of them, though the chances are you'll quickly forget that. You could, for example, include a music file, though it would have to be in the correct context, in this case, when the page is aurally rendered (for the blind). The @media rule is needed in situations like this:

@media aural{
BLOCKQUOTE:after{
content: url("musicfile.mid")
}
}