After/Before pseudo elements in < IE11 - css

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>