CSS Examples Generated Content in CSS2

Date: 11/01/2004 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:




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

CSS Drive

The CSS:

content: "Chapter: ";

content: url(icon.gif);


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


<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)

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.

#1: omarsheriff on 11/27 at 06:46 PM

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.

#2: Digit on 01/12 at 04:42 PM

Really impressive. But it's really a pity that it is not supported in IE :o(

#3: Ste on 06/30 at 05:43 AM

Yes, to bad for IE. But still nice work...

#4: nemanja on 11/25 at 11:29 PM

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

#5: mike on 01/12 at 05:09 PM

this is a cool tutorial but it doesn't work in IE. too bad.

#6: fatfingur on 02/14 at 01:09 PM

click this and put IE7 properties in IE6, (with some javascript library from dean edwards)

IE6 maybe can't, but javaScript can

#7: adanakahini on 05/23 at 05:30 AM

Ahh, now if only more browsers supported CSS 2 ...

#8: Dafin on 09/20 at 10:11 AM

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.

#9: Pozycjonowanie on 10/15 at 10:37 AM

This does not work with IE7

#10: Shaul on 11/25 at 07:39 PM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site