[Resuelto] Subrayar opción menú on hover  

Hola,

He estado buscando la forma para poder mostrar un subrayado en la opción on hover activa del menú principal. He encontrado esta web: https://divesp.com/codigos-personalizar-menu-divi/ y ahí el código siguiente pero no consigo que funcione, no hace nada.

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #15bf86; /*** COLOR DE LA LINEA INFERIOR ***/
height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}

El menú principal lo muestro en todas las páginas y está en el encabezado global hecho con Generador de Temas de Divi. Por favor, ¿sería posible que me indicarais cómo puedo hacer para mostrar un subrayado sobre la opción activa del menú principal on hover? Gracias

Contenido solo visible a usuarios registrados