如何用Tailwind仅为链接的after伪元素添加悬停平移动画？

当然可以给:after伪元素添加这类动画，你的代码问题出在过渡属性的作用对象不对，且缺少动画的初始状态值。修改后的代码如下：

.more-link {
  @apply text-green-700 font-semibold no-underline hover:text-green-800;
}
.more-link:after {
  @apply content-['→'] ml-2 transition ease-in-out transform translate-x-0 hover:translate-x-2;
}

如果你开启了Tailwind的嵌套语法支持，也可以写成：

.more-link {
  @apply text-green-700 font-semibold no-underline hover:text-green-800;

  &:after {
    @apply content-['→'] ml-2 transition ease-in-out transform translate-x-0 hover:translate-x-2;
  }
}

关键调整说明： #

• 过渡属性绑定到伪元素：原来的transition加在父元素.more-link上，伪元素的样式变化不会继承这个过渡效果，必须把transition直接加到:after伪元素上。
• 设置初始transform值：要让translate-x-2产生平滑过渡，必须给伪元素定义初始的translate-x-0作为动画起点，否则hover时会直接跳变，没有动画过程。
• 移除冗余的hover伪元素content：非hover状态已经声明了content-['→']，hover时无需重复定义，避免样式冗余。

修改后，鼠标悬停时只有箭头会平滑向右移动，链接文本仅改变颜色且位置保持不变，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Lindsey Drennan