::after on :hover does not work in IE

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.)

Answers


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.


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)


Need Your Help

How to TFS-unmap without losing physical files?

visual-studio-2010 tfs2010 source-control-explorer

At the moment when unmapping a source on TFS Source Control in Visual Studio 2010, the local downloaded files are removed automatically.

What is the difference between Redirect and RedirectToAction in ASP.NET MVC?

asp.net-mvc

What is the difference between Redirect and RedirectToAction other than their return type?