The combination of a transition and a pseudo element does not work in IE?

Question

I'm trying to show/hide a line under an element using a transition: border-bottom .5s in combination of a ::first-letter pseudo element. The pseudo element is just to make the first character bold. It works well in Chrome, Firefox and Opera but IE does nothing at all.

One work around would be to use a simple html <b></b> instead of css solution ::first-letter {font-weight: bold;}. However, that's not what I want.

Here is a jsfiddle.

Seems that IE isn't doing so well in the pseudo-element departement. (Don't get me wrong, they've done some great work compared to, say, IE7, but there's a lot more to do.) I've had [some similar problems](http://stackoverflow.com/questions/14321878/after-on-hover-does-not-work-in-ie) with IE. — Bram Vanroy, Mar 18 '15 at 18:12
@BramVanroy Very true. I hope that Spartan is better :) Apparently they have gutted most of the existing rendering engine. — Josh Crozier, Mar 18 '15 at 18:13

score 2 · Accepted Answer · edited Mar 18 '15 at 19:35

The only other work-around that I can think of would be to use a :before or :after pseudo element for the border-bottom. In doing so, it seems to work in IE.

In the example below, the :after pseudo element is absolutely positioned relative to the top of the parent.

Updated Example

a {
    display: inline-block;
    position: relative;
    cursor: pointer;
}
a:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0; left: 0;
    border-bottom: 2px solid transparent;
    transition: border-bottom .5s;
}
a:hover:after {
    border-bottom: 2px solid #777;
}
a:first-letter {
    font-weight: bold;
}

<a>my test link</a>

Now it also works well in IE. Just a bit more complex :( – ffrey Mar 18 '15 at 18:29 — ffrey, Mar 18 '15 at 18:29

The combination of a transition and a pseudo element does not work in IE?

1 Answers1