After/Before pseudo elements in < IE11

Question

I created a pseudo element which transitions width to reveal a second pseudo element below of a different colour. It's working in all browsers except IE where the pseudo element becomes 100% of the page width when hovering off the element. What gives?

<span>Hello world</span>

<style>
span{
    position: relative;
    font-size: 64px;
}
span:before, span:after{
    position: absolute;
    content: "";
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 5px;
    transition: all 1s ease;
}
span:before{
    background: green;
}
span:after{
    background: red;

}
span:hover:after{
    width: 0;
}
</style>

https://jsfiddle.net/mmbgLf51/

Answer 1

Can't say (yet) why that happens but here is a workaround, where I use the right property instead.

Update

Giving the span inline-block (or block) does as well solve it, which would mean that the inline element for some reason gets pushed by the pseudo content, and most likely qualifies as a bug ..
.. or normal IE behavior :)

Sample 1 (using right)

span{
    position: relative;
    font-size: 64px;
}
span:before, span:after{
    position: absolute;
    content: " ";
    left: 0;
    bottom: -3px;
    right: 0;
    height: 5px;
    transition: all 1s ease;
}
span:before{
    background: green;
}
span:after{
    background: red;    
}
span:hover:after{
    right: 100%;
}

<span>Hello world</span>

Sample 2 (using display: inline-block)

span{
    display: inline-block;
    position: relative;
    font-size: 64px;
}
span:before, span:after{
    position: absolute;
    content: "";
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 5px;
    transition: all 1s ease;
}
span:before{
    background: green;
}
span:after{
    background: red;    
}
span:hover:after{
    width: 0;
}

<span>Hello world</span>