Home

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:

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)

What's with the IE incompatibility ? I think this should work with all "state of the art browsers"

#1: lage lonen landen on 12/05 at 10:16 PM

Why doesn't this work for me? What am I doing wrong? ontwikkeling

#2: Mary-Anne Davis on 12/20 at 11:49 PM

hey it's not working with IE7 !? what can i do ? seo in iasi

#3: Smith on 12/27 at 07:53 PM

hi very thanks

#4: kombi on 06/20 at 09:20 AM

Wow! CSS is getting closer to PHP all the time. The only time I ever used php was to modify an autogenerated page with formating and other stuff (like adding tracking) Now all css needs is a way to find any text on the page and insert stuff :before and :after :)

#5: Veggiet on 07/20 at 07:19 AM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


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