:before and :after

This issue was partially fixed in Internet Explorer 8 beta 1, but only for text content, counters, and attr(). Generated content can contain images and use them as backgrounds since Internet Explorer 8 beta 2, and can also understand the "normal" keyword, and generated quotes. (However, beta 2 has some bad redraw issues, and the content may not appear until a reflow is forced.) Since Internet Explorer 8 RC 1, the redraw issues have been fixed. In IE 8, it is only possible to use CSS 2's :before syntax, not CSS 3's ::before syntax, and a few other problems also remained, such as computing font sizes relative to the element's parent, instead of the element itself. These issues were fixed in Internet Explorer 9.

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. This is known as Generated Content.

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 3.0- 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 inside the parent element that you want to style. For example, if you wanted to simulate :before and :after elements for a paragraph, put an empty span at each end of the paragraph, and style those instead. Note that these cannot have their contents added using CSS like real :before and :after pseudo-elements, so if they need to include any stylistic text or images, these will need to be included as regular HTML inside the spans. Once again, alter structure to change presentation.

Don't click this link unless you want to be banned from our site.