html - CSS-Transition在伪元素上不起作用

其思想是当Hyperlink出现时会出现某种下划线。下划线将缓慢地增长到它的完整大小。
到目前为止我得到的是：

.wrap {
  margin: 10px auto;
  width: 600px;
}

#test {
  text-decoration: none;
}

#test:after {
  width: 0;
  transition: all 3s;
}

#test:hover:after {
  content: '';
  display: block;
  width: 100%;
  border: 3px solid teal;
}

<div class="wrap">
  <a id="test" href="#">Some dummy-text for testing ...</a>
</div>

下划线按预期显示和消失。但没有转变。
我在这里看到过其他网站在这些浏览器（IE 11）上使用这种效果。所以它应该是普遍有效的。
我做错什么了？
在元素上指定无悬停的转换是如何完成的。据我所知。。。

最佳答案

这是因为只有在content状态下才能添加:hover。
您应该在初始状态下尽可能多地定义，并且只更改:hover状态所需的属性。
尝试

#test:after {
  content: "";
  display: block;
  width: 0;
  transition: all 3s;
}

.wrap {
  margin: 10px auto;
  width: 600px;
}
#test {
  text-decoration: none;
}
#test:after {
  content: "";
  display: block;
  width: 0;
  transition: all 3s;
  border: 3px solid transparent;
}
#test:hover:after {
  width: 100%;
  border: 3px solid teal;
}

<div class="wrap">
  <a id="test" href="#">Some dummy-text for testing ...</a>
</div>

关于html - CSS-Transition在伪元素上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38327542/