CSS 动画留下杂散像素

Question

我正在尝试在我的导航栏链接上实现一个简单的“悬停下划线”动画。但是，动画完成后会留下杂散像素，如下图 GIF 所示。

Underline animation leaves stray pixel to the left

奇怪的是，如果我将光标悬停在具有相同动画的两个链接之间，则不会发生这种情况。仅当我将鼠标悬停在链接上然后将光标移动到其他位置时才会发生这种情况。

The bug doesn't happen while hovering between navbar links

我已经实现了导航栏如下：-

<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

在我看来，anchor 标签上的letter-spacing 属性会导致渲染引擎出现某种计算错误，从而导致其留下杂散像素。

所以我想出了两个解决方案：

解决方案 1：

像这样使用转换：

.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);
}

解决方案 2：

从anchor 标签中删除letter-spacing。

顺便说一句，由于您对实际元素进行了转换，因此您不需要在悬停事件上再次使用它。

Answer 2

为 after 及其过渡添加不透明度

.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%;
  opacity: 0;
  border-bottom: 2px var(--secondary-orange) solid;
  margin-top: 0.3rem;
  transition: width 300ms, opacity 300ms;

}

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

工作解决方案：https://codepen.io/aledebarba/pen/zYNzOrL