body {
    background-color:#DFE1E1;
    font-family:sans-serif;
     margin-left:10%;
    }

a:nth-child(n+1) { 
  color: black;
  display:inline-block;
  border:5px solid rebeccapurple;
  overflow:hidden;
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
  animation: animate 5s ease-in 1 forwards;
}

a:nth-child(1) { 
  border:5px solid yellow;
  }

a:nth-child(2n+2) { 
  border:5px solid blue;
  }

a:nth-child(2n+3) { 
  border:5px solid magenta;
  }
  
@keyframes animate{
  0%{
    width: 0px;
  }
  100%{
    width:290px;
  }
}

<a>A for Apple</a>
<a>B&nbsp;for&nbsp;Blue</a>

请观察A for Apple和B for Blue文本元素之间的css动画，因此最初动画对于文本内容A for Apple并不平滑（我应该说是颠簸），但最终它们在单行上平滑，但在B for Blue中，css动画从初始到最后阶段都非常平滑（如果我引入nbsp html，如：<a>B&nbsp;for&nbsp;Blue</a>）我实际上不想使用nbsp标签，以避免在我的html代码太多的重复，所以请建议替代