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

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 Version 83.0.4103.97 (Official Build) (64-bit)

上使用 MacOS

如果您无法重现该问题，请看下面的屏幕截图：

Answer 1

我也给::before分配了默认值并且工作正常。我认为它试图继承默认值并且令人困惑。

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

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

a::before {
  content: 'Link:';
  transition: all 1s;
  font-size: 1rem;
  color: blue;
}

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

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

Answer 2

我在鼠标悬停上找到了一个解决方案，它有点难看，但至少它运行顺利

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

a::before {
  content: 'Link:';
/*   transition: all 1s; */
}
a:hover {
  color: red;
  font-size: 48px;
}
a:hover::before {
  transition: all 1s;
  color: green;
  font-size: 32px;
}

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

Answer 3

因为伪元素没有默认的font-size所以伪元素会inherita的font-size。这是正在发生的事情：

我们最初在 font-size X 处有两个元素（X 是基于您的其他属性，16px 这里）
悬停时，伪元素将具有 32px，a 将具有 48px
当你取消悬停时（这就是诀窍）伪元素将暂时继承 a (48px) 的 font-size 所以你的过渡将从 32px 到 48px - y，其中 y 正在改变应用于 a 的过渡，直到 48px - y 回到 X

同样的逻辑也适用于着色，因为它也是继承而来的。只需设置默认值 font-size 和 color

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;
  font-size:16px;
  color:blue;
}

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

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

Why is there a delay for the transition of my pseudo elements?

css

pseudo-element

css-transitions