Why does this link hover effect start from the middle and not the left?

Question

I don't understand why in the code below, the link hover effect starts from the middle instead of going from left to right. Can someone please explain why this happens?

.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

It's because the default origin of CSS transforms is the center of the element.

"By default it is at the center of the element and can be moved. It is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter." — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

The line spans the full width, but is scaled to 0 (from the center) to start. Then, on hover, the line is scaled back up to it's original full width.