html - 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

这是因为在 :hover 状态之前您没有添加 content。

您应该在初始状态下尽可能多地定义并且只更改: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>