如何在Tailwind中实现从左向右过渡的链接下划线退出效果？

你现有代码实现了下划线从左到右展开、收缩回原点的效果，要改成退出时向右移动消失的效果，可通过切换下划线的变换原点实现，用Tailwind CSS的写法如下：

<a href="#" class="group font-normal relative inline-block">
    Home
    <span class="absolute bottom-0 left-0 h-0.5 bg-slate-200 w-full transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 group-not-hover:origin-right" />
</a>

效果说明： #

• 初始状态：下划线宽度为100%但被scale-x-0缩放至不可见，变换原点在左侧（origin-left）
• 鼠标悬停时：通过group-hover:scale-x-100将下划线从左侧开始展开至全宽
• 鼠标离开时：group-not-hover:origin-right把变换原点切换到右侧，此时scale-x-0会让下划线从左侧开始收缩、右侧保留，视觉上呈现向右移动消失的效果

关键原理： #

利用CSS transform-origin 属性控制缩放的起始点，配合transition-transform实现平滑过渡，无需额外JavaScript，纯CSS即可完成需求。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov