＆lt;之后/之前的伪元素IE11

Question

我创建了一个伪元素，它转换宽度以显示不同颜色下面的第二个伪元素。它适用于除IE以外的所有浏览器，其中当悬停元素时，伪元素变为页面宽度的100％。是什么给了什么？

<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

不能说（还）为什么会发生这种情况，但这是一种解决方法，我使用right属性。

更新

给予span inline-block（或block）也可以解决它，这意味着内联元素由于某种原因被伪内容推送，并且很可能符合条件作为一个bug ..
..或正常的IE行为：）

样本1（使用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>

样本2（使用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>