:before and :after

What on earth are those? They are pseudo-elements. They don't really exist, but you can pretend that they do. You can style them. Position them. Give them background images. Give them contents. For virtually any element, you can invent two more elements, and use them to add style to any part of the document.

From a styling point of view, this is immensely useful. It makes it possible to take one element, and apply 5 separate images to its background. Without having to nest any elements. It allows content to be dynamically inserted by CSS, like a set of words giving a hint, or in fact, virtually anything. Why does IE not implement this? I wish I knew. They like dynamic content, but they have decided not to use this for whatever reason. Well, I'm not impressed.

Demo: The two main paragraphs on this page should have a pretty box effect (with curvy bars at the top and bottom). The effect should work even if you make the window wider or narrower (unless you make it too narrow - about 80 pixels wide minimum for this particular design). I have also made a page showing how this effect works. Note - Mozilla/FireFox draws them but incorrectly positions them, because it follows a mistake in the CSS 2.0 draft instead of the correction made in the 2.1 revision.

Workaround: Nest elements repeatedly or add elements to the page that surround text to be hidden. Once again, alter structure to change presentation.

Move on to the next page in this article > >

Don't click this link unless you want to be banned from our site.
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.