Pixelastic

IE8 has a strange bug (what bugs aren't strange in IE ?) when dealing with :after and :before pseudo-elements.

I was adding a nice looking arrow after one of my elements using :after. I wanted this arrow to only display when my element was hovered, so I wrote the following code :

<a href="#">Example</a>

a {
	position:relative;
	display:block; 
	height:30px;
}
a:after {
	position:absolute;
	content:"";
	top:0px; 
	right:-15px;
	width:15px;
	height:30px;
	background:url(arrow.gif) top left no-repeat; 
	display:none;
}
a:hover:after {
	display:block;
}

As you can see, nothing too fancy. I positionned my arrow using an empty :after element and a background image. I defaulted the arrow to hidden, and only show it when hovering the element.

IE in action

It does work pretty well in moder browsers. It also seems to work on IE8. When you hover the element in IE8, the arrow gets displayed. But it does not gets hidden when you stop hovering it.

There's a kind of ghost element that keeps getting displayed. It gets removed if you directly mouse it, or scroll your page, or alt-tab, etc. This clearly is a display artefact.

To counter this I had to write it in an other fashion (less readable in my opinion). Removing the default a:after rule and adding all properties to a:hover:after :

a {
	position:relative;
	display:block;
	height:30px;
}
a:hover:after {
	position:absolute;
	content:"";
	top:0px;
	right:-15px;
	width:15px;
	height:30px;
	background:url(arrow.gif) top left no-repeat;
	display:block;
}

Update

It should be noted that more generally, I gets confused and create ghost elements and styling when we try to update the :after/:before properties based on a rule selecting its parent.

There seems to have a little lag/delay before the properties gets applied, and most of the time they do not.

:after and :before pseudo-elements allow one to add generated content before or after an other element. It can be used to add quotes around text, icons after a link to specify the language of the target page and a lot of other useful stuff like that.

It can also be mastered to create more powerful styling. I'll post more about that later.

Anyway, IE6 and IE7 don't support it. Firefox is supposed to support it from the 3.0 version but in fact it is still buggy in this release.

Pseudo-elements must be inline elements and can't be absolutly positionned in FF3.0, thus greatly reducing the number of fun things we could do with them in this browser.

It faced me with a challenge. If I wrote :before and :after rules, they would be only understood by FF3.0 but badly rendered, resulting in half the styling I expected.

Browsers that don't understand the rules would not apply them and keep the default rendering, compliant browsers will render all the rules, but the grey area in between is filled with FF3.0 that will think it can handle them and will finally badly render them.

I haven't found a way to specificaly target FF3.0, so I used an alternate method.

All the browsers that understand the :only-of-type selector also understand :before/:after. But FF3.0 and IE7 do not understand :only-of-type. So if I wrote a rule starting with body:only-of-type, it will only be applied to browsers with complete :after and :before support (excluding FF3.0). This solved my problem.

Unfortunatly, it will also filter out IE7 who does not understand :only-of-type but does understand :after/:before. I usually remove all fancy form styling for IE anyway so that's not a big deal for me, but if you really care, you just have to override the rule in a IE7 specific stylesheet.