Tailwind CSS中:after伪元素hover过渡动画失效问题求助

你遇到的问题是因为过渡动画类被应用在了<li>元素本身，而非目标伪元素:after上，导致伪元素的宽度变化无法触发平滑过渡。

修改后的代码如下：

<ul class="flex gap-3">
  <li class="after:content-[''] after:block after:w-0 after:h-2 after:bg-black after:transition after:duration-1000 after:ease-in-out hover:after:w-full">
    <a href="/" class="text-lg font-bold text-black uppercase"> home </a>
  </li>
</ul>

关键修改说明： #

• 把原本作用于<li>的transition duration-1000 ease-in-out，通过Tailwind的伪元素前缀after-改为after:transition after:duration-1000 after:ease-in-out，让过渡规则直接绑定到:after伪元素上
• 保留after:w-0（初始宽度为0）和hover:after:w-full（hover时宽度铺满）的设置，这两个属性值属于可过渡的CSS属性，配合过渡规则就能实现平滑的宽度展开动画

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