Is there a way to hover over a link in one class to trigger an animation in another using Tailwind CSS?

I am having trouble getting a link animation in TailwindCSS (which has made life easier) to work...

What I want to do is hover over About and get an animation to work. At the moment, when I hover over the link in a div, nothing happens, but when I hover over the clearspace/ &nbsp (which is also inside the div), the animation plays.

Here's some code:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

<div class="group text-black text-xs text-center relative">  
  <a href="#">
   <span>
     About
   </span>
   <span class="absolute -z-10 top-0 -right-4 group-hover:transition-all duration-300 ease-in-out group-hover:border-r-8 group-hover:border-red-700">
      
   </span>   
 </a>
</div>

<!-- end snippet -->

Any help greatly appreciated...

P.S. Also the whole div moves to the left when hovered over (including the About). This shouldn't happen...

Apply tailwind classes on the html and it will work fine. Try that:-

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

     <div class="button group text-black text-xs text-center">
        <a href="#">
           About
              <span class="link transition-all duration-300 ease-in-out group-hover:border-r-4">
                   
              </span>
        </a>
      </div>

<!-- end snippet -->