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)
Hallo.
I would like to thank that you are doing a good job.
This home page is my favorite, and there are a lot of interesting things.
It works, all right, especially if you put the right url, which I didn't. Oops. anyways, I'm an 11-year-old. Webmaster. Bubbaye.
Really impressive. But it's really a pity that it is not supported in IE :o(
Yes, to bad for IE. But still nice work...
I wrote a tutorial similar to this. CSS3 even allows you to make generated content even more dynamic thanks for 'partial attribute value string' matching! For example, in CSS3 you can have a MID icon if the file is a .mid, you can have a PDF icon if the file is a .pdf, and all through CSS! No Javascript needed! http://cssdreams.com/tu/notations.php
this is a cool tutorial but it doesn't work in IE. too bad.
click this and put IE7 properties in IE6, (with some javascript library from dean edwards)
IE6 maybe can't, but javaScript can
:)
Ahh, now if only more browsers supported CSS 2 ...
I've been thinking about this a little more.
Patching 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.
User scripts are no different to other scripts IMO. I think you should keep GreaseMonkIE simple. The same as the original GreaseMonkey. Keep it as a mechanism for injecting user scripts.
One possiblity is that you guys (Todd and Aaron) could come up with a mini API to aid in the creation of cross-browser user scripts. GM_addEventListener immediately springs to mind. :-)
My real belief is that both GMs should be plain and simple. Leave the cross-browser headache to the scripters themselves.
This does not work with IE7
