为什么此链接悬停效果从中间开始而不是从左边开始？

Question

我不明白为什么在下面的代码中，链接悬停效果从中间开始，而不是从左到右。有人可以解释为什么会这样吗？

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p>Visit the official rules <a class="orange-link" href="#">here</a> on how to send in a write-in entry.</p>

Answer 1

这是因为 CSS 变换的默认原点是元素的中心。

\n\n

\n

“默认情况下，它位于元素的中心并且可以移动。它由需要特定点作为参数的多种变换使用，例如旋转、缩放或倾斜。”\n \xe2\x80\x94 : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

\n

\n\n

该线跨越整个宽度，但开始时缩放为 0（从中心开始）。然后，在悬停时，线条会缩放回原来的全宽。

\n