::after on :hover does not work in IE

Question

I have found some strange behaviour in Internet Explorer (IE10 and also when emulating all versions that support ::after). When applying the pseudo-element to a hover state of an element (.element:hover::after) it does not work in IE, but it does in all other major browsers.

http://jsfiddle.net/BramVanroy/9jpeZ/1/

#d1::after { /* Works in IE */
  content: "no hover needed";
  border: 1px solid blue;
  display: block;
}

#d2:hover::after { /* Does not work in IE */
  content: "Y U NO WORK IN IE";
  border: 1px solid blue;
  display: block;
}

Is there a CSS fix available for this? (No JS/jQuery.)

Answer 1

This seems to be a bug in IE10 (even when it emulates other versions).

I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.

Answer 2

I had an instance where this wasn't working in IE as well, When I switched the order of ":hover" and ":after" in my style sheet from

    .myclassname::after:hover

to

    .myclassname:hover::after

I was able to get the desired result, all the way back to IE9 (didn't test anything lower)