过渡和伪元素的组合在 IE 中不起作用？答案

【问题标题】：The combination of a transition and a pseudo element does not work in IE?过渡和伪元素的组合在 IE 中不起作用？
【发布时间】：2015-03-18 17:58:50
【问题描述】：

我正在尝试使用transition: border-bottom .5s 结合::first-letter 伪元素来显示/隐藏元素下的一行。伪元素只是为了使第一个字符bold。它在 Chrome、Firefox 和 Opera 中运行良好，但 IE 什么都不做。

一种解决方法是使用简单的 html <b></b> 而不是 css 解决方案 ::first-letter {font-weight: bold;}。然而，这不是我想要的。

这是jsfiddle。

【问题讨论】：

哪个版本的IE？
@Huangism 我可以在 IE11 中重现该问题。
似乎IE在伪元素部门的表现并不好。（不要误会我的意思，与 IE7 相比，他们已经做了一些很棒的工作，但还有很多工作要做。）我在 IE 上使用过 some similar problems。
@BramVanroy 非常正确。我希望 Spartan 更好 :) 显然他们已经破坏了大部分现有的渲染引擎。

标签： html css internet-explorer

【解决方案1】：

我能想到的唯一其他解决方法是为border-bottom 使用:before 或:after 伪元素。这样做，它似乎在 IE 中工作。

在下面的示例中，:after 伪元素绝对定位于父元素的顶部相对。

Updated Example

a {
    display: inline-block;
    position: relative;
    cursor: pointer;
}
a:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0; left: 0;
    border-bottom: 2px solid transparent;
    transition: border-bottom .5s;
}
a:hover:after {
    border-bottom: 2px solid #777;
}
a:first-letter {
    font-weight: bold;
}

&lt;a&gt;my test link&lt;/a&gt;

【讨论】：

现在它在 IE 中也能正常工作。只是有点复杂:(