后面的顺风转换:背景不工作

Question

我已经把这个标记

<a class="group custom block transition delay-150 duration-1000 ease-in-out after:content-[''] after:block after:relative after:-mt-4 after:h-4 after:w-full after:rounded-b-lg after:bg-gradient-to-t after:from-black after:to-black/10 hover:after:bg-inherit " href="/"><div class="h-10 bg-transparent"><p class="text-center text-sm 2xl:text-base leading-4 tracking-tighter uppercase " >Test caption</p></div> <figure class="relative top-0 group-hover:-top-4 duration-300 ease-out" role="group"><img class="w-full aspect-16/10 object-cover rounded-lg" src="https://www.fillmurray.com/640/360" loading="lazy" alt=""></figure></a>

https://play.tailwindcss.com/ZyC3MXahrB

之后:bg和悬停之间的转换:之后:bg不工作

怎么算出来？

Answer 1

尝试在after:transition-all标记中添加<a>。

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex">
  <div class="w-1/3 mx-auto">
  <a class="group custom block transition delay-150 duration-1000 ease-in-out after:content-[''] after:block after:relative after:-mt-4 after:h-4 after:w-full after:rounded-b-lg after:bg-gradient-to-t after:from-white after:to-white/10 hover:after:bg-red-400 after:transition-all" href="/">
    <div class="h-10 bg-transparent"><p class="text-center text-sm 2xl:text-base leading-4 tracking-tighter uppercase " >Test caption</p>
  </div>
  <figure class="relative top-0 group-hover:-top-4 duration-300 ease-out" role="group">
    <img class="w-full aspect-16/10 object-cover rounded-lg" src="https://www.fillmurray.com/640/360" loading="lazy" alt="">
  </figure>
  </a>
  </div>
</div>

​