title: Tailwind transition on after:background doesn't work
body: <p>I've got this mark up</p>
  <pre><code>&lt;a class=&quot;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 &quot; href=&quot;/&quot;&gt;&lt;div class=&quot;h-10 bg-transparent&quot;&gt;&lt;p class=&quot;text-center text-sm 2xl:text-base leading-4 tracking-tighter uppercase &quot; &gt;Test caption&lt;/p&gt;&lt;/div&gt; &lt;figure class=&quot;relative top-0 group-hover:-top-4 duration-300 ease-out&quot; role=&quot;group&quot;&gt;&lt;img class=&quot;w-full aspect-16/10 object-cover rounded-lg&quot; src=&quot;https://www.fillmurray.com/640/360&quot; loading=&quot;lazy&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;&lt;/a&gt;
  </code></pre>
  <p><a href="https://play.tailwindcss.com/ZyC3MXahrB" rel="nofollow noreferrer">https://play.tailwindcss.com/ZyC3MXahrB</a></p>
  <p>the transition between after:bg and hover:after:bg doesn't work</p>
  <p>how to work it out?</p>