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

Question

我正在尝试 show/hide 使用 transition: border-bottom .5s 与 ::first-letter 伪元素组合的元素下的一行。伪元素只是让第一个字符bold。它在 Chrome、Firefox 和 Opera 中运行良好，但 IE 什么也不做。

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

这里是jsfiddle.

Answer 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;
}

<a>my test link</a>

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

The combination of a transition and a pseudo element does not work in IE?

html

css

internet-explorer