为什么我的伪元素过渡会有延迟？

Question

我需要同时对元素及其伪元素进行动画处理。

然后我注意到，当我悬停时，一切都很好。但是然后我停止悬停，Home首先进行动画处理，然后，伪元素Link开始进行动画处理。

为什么会这样表现？有没有办法让它们同时动画？

这里是我的问题的简化说明：

a {
  color: blue;
  transition: all 1s;
  text-decoration: none;
}

a:hover {
  color: red;
  font-size: 48px;
}

a:hover::before {
  color: green;
  font-size: 32px;
}

a::before {
  content: 'Link:';
  transition: all 1s;
}

<a href="javascript: void(0)">Home</a>

我正在将MacOS与Chrome Version 83.0.4103.97 (Official Build) (64-bit)结合使用>

如果您无法重现问题，请参见以下屏幕截图：

我需要同时对元素及其伪元素进行动画处理。然后我注意到，当我悬停时，一切都很好。但是然后我停止悬停，Home动画，然后是伪元素...

Answer 1

我刚刚将font-size: 1rem;添加到a::before，并且工作正常。太奇怪了。