CSS Tutorial - Pseudo-Classes Elements

:before & :after

Now we enter the realm of generated content. That means that the content is generated by the CSS style, it is not written in the XHTML page. Generations of philosophers have been arguing about the division of Content & Design, which puts Information/Content into the XHTML page, and Design into CSS, and this new (old browsers like the one with the big blue letter don't speak it) thing called generated content.

Well to me, the trick is, that the content one generated (or should generate) with this functionality is not supposed to transport information, it's supposed to be used for placing ornaments and similar design related pieces.

One word of warning: Generated Content is rather new, and supported only by modern browsers, and even then with restrictions. Opera 8 works happily with it, I can't think of anything it doesn't do right now. IE doesn't know what it is, but that's okay for a 3 years old browser, and Firefox 1 understands it, but I have found one bug: It doesn't like positioning of generated content.

One can use :before and :after for any class, and it will put the content it will generate right where it says. You can use all the different styles on them, too, put borders around it, color it, position it absolute or relative, anything you like.

Okay, lets play with it a bit. First, we want to have all links to show an upwards arrow in front of them:

						<a href="#" class="before-after-1">This is a link<a>

						a.before-after-1{

							font-size:1.1em;

						}

						a.before-after-1:before{

							content: "\27B6";

							color:black;

							font-size:1.1em;
						
						}

Okay, now let's place some links. And here: This is a link. Nowhere in this code is the arrow, it's in the CSS style.

Advantage: Say, we have 200 pages, each with 5 to 20 links, that might result in 2000 links. Now let's assume that sooner or later we get sick of the arrows, and we want something else, like the text [link:], and remove the underlining of the link in front of it. With CSS, no problem, thank's to :before and :after we can change all 2000 links in ten seconds! You just change the text in the CSS class.
Okay, now let's place some links. And here: This is a link.

How about some fancy quote signs around paragraphs?

						<p href="#" class="before-after-3">

							This is a paragraph
						
						</p>
						
						p.before-after-3:before{

							content: "\00AB";

							color:black;

							font-size:0.9em;
						
						}

						p.before-after-3:after{

							content: "\00BB";

							color:black;

							font-size:0.9em;
						
						}

Now let's spread some paragraphs around:

This is a paragraph

Just so you see, it doesn't only work with links

Certainly you can use that on <div> or images or so, too!