Internet Explorer strange font-size behaviour with :after and :after::hover pseudo classes

Question

Today I found an internet explorer bug that left me confused. Apparently internet explorer doubles(?) the font size of an :after class if the font-size is set on both the :after and :hover::after.

I've set up a quick demo, and came up with a workaround that I don't like since it won't work if you want to display content in both :after and :hover::after states. Does anyone have any idea what could cause this behaviour and how to fix it properly?

http://jsfiddle.net/q15Lw90d/7/

:hover{} /* Fixes pseudo-element animation on :hover
            for Internet Explorer 10 */

.workaround::after {
    content: "";
    font-size:2em;
}

.workaround:hover::after {
    color:green;
    content:", internet explorer";
}

.iebug::after {
    content: "";
    font-size:2em;
}

.iebug:hover::after {
    color:green;
    font-size:2em;
    content:", internet explorer";
}

Answer 1

Testing your JS.Fiddle I was getting the same issue on IE. I found that if I changed the font-size from em to px the hover content displayed as expected. You can see your update fiddle here.

I did a little research and found this quote on CSS-Tricks website and I believe the same concept is happening in your case.

There are still a few obnoxious things with ems, like the cascading. If you decide that list items should be font-size: 1.1em and then have nested lists, it will cascade and grow the font size of the child lists. You probably didn't want that. You can fix it with li li { font-size: 1em; } but that's the kind of thing that can grind your gourd. That's where rem's can come in, but that can be tricky as well since there is less browser support (IE 9+).

All that to say you can change your font sizes to use something other than em and you should be good.

You can read a similar question posted here on SO.