Me gustaría sacar esto de esta publicación original: https://stackoverflow.com/a/65040903/1406440
Usé algo similar hace años ( https://codepen.io/moy/pen/pZdjMX ) pero usa mucho jQuery en comparación. Entonces me preguntaba si puedo modificar el ejemplo en la publicación original para lograr el mismo efecto. Lo que significaría...
class en lugar de una id ?:before o :after de la clase para que no tenga un div flotando en el ul . const navBar = document.getElementById("nav"); const navCursor = navBar.querySelector('.cursor'); const navItems = navBar.querySelectorAll('li'); function handleMouseEnterNavItem(event) { // executed when mouse enter a navigation item // update cursor to match position and size of target const { offsetLeft, clientWidth } = event.target; navCursor.style.left = offsetLeft + 'px'; navCursor.style.width = clientWidth + 'px'; } navItems.forEach((navItem) => { navItem.addEventListener('mouseenter', handleMouseEnterNavItem); }); ul { position: relative; } ul li { font-family: sans-serif; text-decoration: none; color: gray; margin: 22px 10px 10px; display: inline-block; padding: 0; /* note: padding will be underlined */ } ul .cursor { background: blue; height: 1px; position: absolute; bottom: 0; z-index: 10; transition: .16s all 0.025s; } ul a { text-decoration: none; } <ul id="nav" class="tabs-nav"> <li class="active"><a href="#">News</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Search</a></li> <li><a href="#">Time</a></li> <div class="cursor"></div> </ul>