<之后/之前的伪元素IE11

问题描述

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

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>

推荐答案

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

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

更新

给予 span inline-block （或 block ）也可以解决它，这意味着内联元素由于某种原因被伪内容推动，并且很可能有资格作为错误..

..或正常的IE行为：）

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 :)

示例1（使用正确）

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>

这篇关于<之后/之前的伪元素IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！