Menu : Lineas ANIMADAS debajo de los LINKS

Tambien funciona con el menu personalizado:   

bootstrap 5 wp_nav_menu walker : https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

/* before = contenido antes que aparesca la etiqueta */
.navbar ul li a::before
{
    content: '';    
    position: absolute;
    opacity: 0;
    transition: 0.2s;
    bottom: 0; /*posicion abajo*/
    width: 0;    
    height: 3px;
    background: #ffdd7c;
}
/* Cuando paso el mouse la linea de abajo
 aparece con un ancho definido */
 .navbar ul li a:hover::before{
    opacity: 1;
    width: 20%;
  }

Referencia

https://www.youtube.com/watch?v=n2ejMuY5hKc