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 DriveMusic1.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)
Yes nemanja!It works for IE, all right.naruto
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
I can't work it with IE7,I think there is a problem..
CSScssCSScssCSScss
Good work,thanks for this code.It is working completely and clearly..
onebuttoninfo.netclick2infoplanet.comonebuttonsearch.netsearchbasket.netsupplyinfo.netlearntoreach.comfindandlearn.comteachmemore.netsearchcosmos.netcocoindirectory.comdiscovertoinfo.comcocoinfo.netultimateinfo.netreachtoinfo.comlearn2info.comsurfingforinfo.comtaketolearn.comalwaysdirectory.com
patching IE is too slow but Thanks for that you are doing a good job.
CSS still has some limitations but your designs prove that most of them could be overcome by use of proper thought and innovation. What it means is that you invest more time while designing your stuff but gain a lot through improved navigational ease and speed and removing a lot of clutter from your web
atching IE is too slow. Especially the event model. On a Mozilla platform you have access to the underlying DOM objects. It is an easy matter to extend the interfaces of any object you like. To do the same on IE, you have to extend the interface of each individual DOM object. This is really really slow.
Why ain't it working with IE7 ?
Great job man...i never saw such a wonderful source of CSS
