为什么我的伪元素的转换会有延迟？

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>

我在 Chrome 上使用 MacOS Version 83.0.4103.97 (Official Build) (64-bit)

如果你不能重现问题，这里是它的屏幕截图：

Answer 1

我还指定了默认值 \xe2\x80\x8b\xe2\x80\x8bto::before并且工作正常。我认为它试图继承默认值，这很令人困惑。

\n\n

\r\n

\r\n

a {\r\n  color: blue;\r\n  transition: all 1s;\r\n  text-decoration: none;\r\n}\r\n\r\na:hover {\r\n  color: red;\r\n  font-size: 48px;\r\n}\r\n\r\na::before {\r\n  content: \'Link:\';\r\n  transition: all 1s;\r\n  font-size: 1rem;\r\n  color: blue;\r\n}\r\n\r\na:hover::before {\r\n  color: green;\r\n  font-size: 32px;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n