Can you apply hover animation to after element only with tailwind?

Question

I'm trying to customize a link class to have the after:content-['→'] to translate-x-2 whenever you hover over the link and I can't get it to work, and only want the arrow to animate, not the text. Here's the code I have:

  .more-link {
    @apply text-green-700 font-semibold no-underline after:content-['→'] after:ml-2 transition ease-in-out hover:after:content-['→'] hover:after:translate-x-2 hover:text-green-800;
  }

I've tried changing the nesting order, but that did nothing. Is this even possible to animate the after pseudo element or nah?

Answer 1

Figured it out! Key was adding the inline-flex.

  .more-link {
    @apply text-green-700 inline-flex font-semibold no-underline  after:content-['→'] after:mx-2  hover:after:content-['→'] transition duration-300 ease-in-out hover:after:translate-x-2 hover:text-green-800 ;
  }