CSS Examples Generated Content in CSS2

Author: CSS Drive

CSS2 supports the insertion of generated content, which is content that's specified using your style sheet and applied dynamically to the page according to your CSS definition. This is accomplished using the ":before" and ":after" pseudo-classes, which denotes whether the content should be added before or after the element in question. You can insert regular "string" content or an embedded object (ie: an image). CSS2's Generated Content is supported in Mozilla/Firefox and Opera 7, though not IE 6.

The word "Chapter:" in each of the headers below are dynamically generated using CSS2:

1

2

3

The music icon image next to the midi links are dynamically added as well:

CSS Drive
Music1.mid
Music2.mid

The CSS:

h2:before{
content: "Chapter: ";
}

a.music:after{
content: url(icon.gif);
}

The HTML:

<p><b>The word "Chapter:" in each of the headers below are dynamically generated using CSS2:</b></p>

<h2>1</h2>
<h2>2</h2>
<h2>3</h2>

<p><b>The music icon image next to the midi links are dynamically added as well:</b></p>

<a href="http://www.cssdrive.com">CSS Drive</a><br />
<a href="music1.mid" class="music">Music1.mid</a><br />
<a href="music2.mid" class="music">Music2.mid</a><br />

Comments (25)