CSS underline animation exceeds navlink and only displays one length for all

Question

I am trying to create an underline animation effect where when hovering over a link, the underline moves from left to right and the underline fits each word. I have been able to create the animation but the underline does one big length for each word, exceeding its length. For reference, i have tried .item-link-beige a, .item-link-beige a li, .item-link-beige a li ul, .item-link-beige a li span and .item-link-beige li > a and have not been able to fix the problem.

here is my code:

Navbar.jsx

const navigation = [ 
  {_id:102, title: 'ABOUT US', href: '/AboutUs'},
  {_id:103, title: 'SHOP', href: '/Shop'},
  {_id:104, title: 'MENU', href: '/Menu'},
  {_id:105, title: 'CONTACT US', href: '/ContactUs'},
];

...

return (

...
<ul className={`${colour ? 'item-link-beige nav-list-green' : 'item-link-beige'} ${colour ? 'nav-list-beige nav-list-green' : 'nav-list-beige'}`}
          >
          {
            navigation.map((item) => (
              <NavLink 
                reloadDocument
                to={item?.href} 
                key={item._id} 
                >
                <li className={`${active === item?.href ? 'nav-list-green active' : 'nav-list-green'}`}> 
                  {item?.title}
                  <span className={`${active === item?.href ? 'nav-list-green active' : 'nav-list-green'}`}/>
                </li>
              </NavLink>
            ))
          }
        </ul>
)

App.css

/* for links designs only */

.nav-list-beige {
  display: flex;
  gap: 50px;
  list-style-type: none;
  justify-content: center;
  font-size: larger;
  display: flex;
  position: relative; top: -30px; left: 350px;
}

/* to highlight current page */
.active {
  color: hsl(96, 24%, 44%)
}

.nav-list-beige a {
  color: hsl(48, 54%, 89%);
  text-decoration: none;
  transition-duration: 500ms;
}

.nav-list-beige a:hover {
  color: hsl(48, 100%, 85%);
  transition-duration: 300ms;
  text-shadow: 0px 0px 2px;
}

.nav-list-green a {
  color: hsl(0, 0%, 0%);
}

.nav-list-green a:hover {
  color: hsl(96, 24%, 44%);
}


/*for underline effect */

.item-link-beige {
  cursor: pointer;
}

.item-link-beige a > li::after {
  content: '';
  background-color: blue;
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 2px;
  transition: transform .3s ease-out;
  transform: scaleX(0);
  transform-origin: bottom right;
}

.item-link-beige a > li:hover::after {
  color: blue;
  transform: scaleX(1);
  transform-origin: bottom left;
}