CSS-Transition不适用于伪元素

Question

这个想法是出现时会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)上使用这些效果.所以它应该通常工作.

我做错了什么？

指定元素 - 无悬停的转换是如何完成的.我所知道的 ...

Answer 1

这是因为你没有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>