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)

Yes nemanja!It works for IE, all right.naruto

#1: Derek on 03/23 at 08:30 AM

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.

#2: Kunsthandwerk on 06/20 at 07:24 PM

I can't work it with IE7,I think there is a problem..


#3: hayek on 06/23 at 08:21 PM

It works for IE

#5: safertr on 07/28 at 07:49 AM

patching IE is too slow but Thanks for that you are doing a good job.

#6: safertr on 07/28 at 08:39 AM

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

#7: Balendu Sharma Dadhich on 08/20 at 02:46 AM

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.

#8: flower girl basket on 09/12 at 07:15 AM

Why ain't it working with IE7 ?

#9: backlink tool on 11/20 at 10:15 PM

Great job man...i never saw such a wonderful source of CSS

#10: Vijendra on 11/28 at 01:23 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