0

I've got this mark up

<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

the transition between after:bg and hover:after:bg doesn't work

how to work it out?

user3887366
  • 2,226
  • 4
  • 28
  • 41

1 Answers1

0

Try to add after:transition-all in the <a> tag.

<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>
MagnusEffect
  • 3,363
  • 1
  • 16
  • 41