After/Before < 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）也解决了这个问题，这意味着内联元素出于某种原因被伪内容推送，而且大多数可能属于错误 ..
.. 或正常的 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>

After/Before < IE11 中的伪元素

After/Before pseudo elements in < IE11

css

internet-explorer

pseudo-element