CSS Animation leaves stray pixels behind

Question

I'm trying to achieve a simple "Underline on hover" animation on my navbar links. The animation, however, leaves stray pixels behind after the animation is complete, as shown in the below GIF.

Underline animation leaves stray pixel to the left

The weird thing is, it does not happen if I hover the cursor between two links having the same animation. It happens only when I hover on a link and then move my cursor elsewhere.

The bug doesn't happen while hovering between navbar links

I have implemented the navbar as follows:-

<div class="nav-bar-flex">
      <a href="#">Home</a>
      <a href="#">Company</a>
      <a href="#">Careers</a>
</div>

CSS:

.nav-bar-flex a {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.055rem;
}

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 0%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: width 300ms;
}

.nav-bar-flex > a:hover::after {
     width: 100%;
     transition: width 300ms;
}

Answer 1

It seems to me that the letter-spacing property on the anchor tags is causing some kind of calculation error for the rendering engine which causes it to leave a stray pixel.

So there are two solutions I was able to come up with:

Solution 1:

Use transform to do it like so:

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 100%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: transform 300ms;
     transform: scaleX(0);
     transform-origin: left;
}
.nav-bar-flex > a:hover::after {
     transform: scaleX(1);
}

Solution 2:

Remove letter-spacing from the anchor tags.

By the way, since you have transition on the actual element you do not need to have it again on the hover event.