Vue group-hover animation not happening

I'm trying to make an animation where width of a absolute positioned div expand to 100%, so when I hover "Feminino" or "Masculino" this pink bar works like a border top, in this picture I've put its width to 1/2. This code makes sense to me but it isn't working, any help?

Screenshot of Nav

<template>
  <div class="h-full w-[110px] flex flex-row items-center justify-center">
    <RouterLink :to="{name:destination}" class="flex items-center justify-center text-[13px] 
  font-[900] hover:text-[13.5px] hover:text-[#e384e3] group">
  <div class="absolute left-0 top-[-10%] h-2 w-0 border-t-2 border-[#e384e3] group-hover:animation-AppearBorderTop"></div>
  {{ content }}
  </RouterLink>
  </div>
</template>

This is my tailwind.config.js

theme: {
    extend: {
      animation: {
        'AppearBorderTop': 'BorderTop 2s',
      },
      keyframes: {
        BorderTop: {
          '25%': {width:'25%'},
          '50%': {width:'50%'},
          '75%': {width:'75%'},
          '100%': {width:'100%'},
        }
      },
    },
  },
  plugins: [],
  variants: {
    extend: {
      animation: ["group-hover"],
    },
  },