转换和伪元素的组合在IE中不起作用

Question

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

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

这是一把小提琴。

Answer 1

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

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

更新示例

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>