CSS Generated content. One of the most facinating aspects of CSS2.

A lot of web sites explain how to use the ‘content’ property, (along with the :before and :after pseudo elements) but they often don’t give you real-world examples of what GOOD uses for this property would, or could be. For example:

Is often used. It makes perfect sense syntactically, but how useful is that?  Unless you name your headers One, Two, Three, etc… I don’t see that as being of much use in the real world of web development. With this topic, I thought it would be nice to share all of the facinating uses you may have come accross or made up using the :content property yourself.

Show us only examples which really push the envelope and allows us to broaden our understanding of how we can really begin to take advantage of this property; and all the more so when IE7 hits the streets. I’ll kick off the discussion with some code examples of my own using ‘content’ and explain why they are useful.

Dynamic file-type notations

In this example, we use an attribute selector, with the CSS-3 substring matching attribute selector designated by a dollar sign ( $ ) to select an element based upon what file extension is used at the end of the “href” attribute value.

...in plain english, CSS can style a link differently than others based upon what type of file the link is!

The output of this code would look something like this (PDF)

Also, you may notice that the (PDF) notation has an underline and is part of the link. This is not a bad thing, but it doesn’t look all that good. To fix it, and make sure its lined up nicely you can additionally throw in a few extra properties.

The output now (improved) looks like this  (PDF)

If you want to get even more creative, you can append a small icon after the link, that allows the user to know what type of file they are about to click on!

Update: 
As of late, people seem to be calling this technique “link markers”. If your thinking what I’m thinking, I think, this may be something we’ll start seeing a lot more of in Web 2.0

Notes:
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#attribute-substrings

The attr(x) function

Plenty of web sites refer to this example when describing what the attr(x) function does. In general, it justs pulls the attribute value out of an element, and returns it as a string. A string that can be used, however you please.

Sure, I’ll admit - showing users what the URL of a link was, AFTER the page has been printed is quite useful.

Though, it doesn’t look all that good crammed up against the right side of a link. And what if we have “back to top” (section anchored) links inside/throughout the page?  In this case it would be useless to the user to see “#top” as the URL, to remedy this, we can:

1. Make it exclude links which begin with a pound sign:

2. Make it enclose the href value with parenthesis, and give it some spacing so it’ll look pretty :-)

Be sure to “cite” the author(s) of your blockquotes!

This one I can’t take the credit for, I stumbled upon it, and when I found it, I was jumping up and down in awe. It’s generally a good practice to include the “cite” attribute when you use a blockquote so the user will have some sort of reference of what URL or whom the quote was taken from.

However, this attribute is never displayed on-screen. So most users simply disregard it when coding their pages. But now so now. This code:

When used with:

Will output something like this:

Using CSS can really be powerful, and is most certainly the future for web designers.
Quote from: http://www.cssdreams.com

However the link following the “Quote from:” bit will not be hyperlinked as it is here, unless you add some DOM scripting to do that part.

Additionally, the guy who thought of this also included some code to make it look nice. Adding the bit of code below gives it some padding/margin spacing, and add’s a single pixel divider between the quoted text and the cite URL.  This is very nice!

In addition to using the content property, you can also use counters to number your chapter headings automatically.

http://nickpresta.ath.cx/source/h1_before_content.html

The possibilities are endless.

great tut mike.
i didn’t really understand the part with the links, but i was fine with the rest ^^;

thanks a lot!

Thanks Mike for the informative Tutorial

agreed, thanks - Informative stuff I will no doubt come back to sometime when I am wearing a css3 hat :)

Great stuff thanks for the quality tutorial

i didn’t really understand the part with the links, but i was fine

An example I use frequently is the following:

Instead of adding <div class=“clear”></div> (or whatever other solutions people add to their XHTML) underneath an element that contains floating elements, just use this CSS. #element needs to be the ID of the element that contains the floating elements.

Hope this helps someone, and apologies if it has been mentioned already :-)

Thank you so much for your sharing ;-)

maison de credit

Thank you very much
organisme de credit

simulation credit auto
A VERY DIFFERENT BEAT.
Great

That’s quite a great interesting topic. Thank u so much, Newbie. Your detail is very helpful and easy to understand. :lol:

simulation rachat credit

this is an interesting discussion.. thank you for sharing :)
simulation rachat de credit