< IE11 中的伪元素之后/之前答案

【问题标题】：After/Before pseudo elements in < IE11< IE11 中的伪元素之后/之前
【发布时间】：2016-08-14 23:03:47
【问题描述】：

我创建了一个伪元素，它可以转换宽度以显示不同颜色的第二个伪元素。它适用于除 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/

【问题讨论】：

标签： css internet-explorer pseudo-element

【解决方案1】：

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

更新

给出spaninline-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%;
}

&lt;span&gt;Hello world&lt;/span&gt;

示例 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;
}

&lt;span&gt;Hello world&lt;/span&gt;

【讨论】：