Tengo dos enlaces, a saber, "Usuarios totales" e "Información de usuarios". De forma predeterminada, "Usuarios totales" está subrayado, pero cuando hago clic en "Información de usuarios", el subrayado se mueve al enlace en el que se hizo clic y luego vuelve a su posición predeterminada, es decir, "Usuarios totales". ¿Puede alguien ayudarme con esto? Quiero subrayar para permanecer en el enlace en el que hice clic.
Mi código HTML:
<nav> <a style="margin-left: 140px;" routerLink="totalUsers" routerLinkActive="active" id="uno" class="one"> Total Users </a> <a routerLink="usersInformation" routerLinkActive="active" id="dos" class="two"> Users Information </a> <hr/> </nav>Mi código CSS:
a { display: inline-block; width: 11%; text-decoration: none; color: #333; } #uno:focus ~ hr { margin-left: 140px; } #dos:focus ~ hr { margin-left: 22.1% !important; width: 10.3% !important; } hr { height: 0.2rem; width: 6.5%; margin-left: 140px ; margin-top: 0; background: #d9534f; border: none; transition: 0.3s ease-in-out; }Hice algo como esto y funcionó. Jugó con margin-left, iniciando margin-left con 0 y luego moviéndolo 100px al hacer clic en el segundo enlace y de regreso a 0 al hacer clic en el primer enlace.codigosandbox
hr { height: 0.2rem; width: 6.5%; margin-left: 0; margin-top: 0; background: #d9534f; border: none; transition: 0.3s ease-in-out; } #two:focus ~ hr { margin-left: 100px; } #one:focus ~ hr { margin-left: 0px; }Le sugiero que use background-image: linear-gradient() en lugar de usar la etiqueta hr , que es mucho más fácil y podría add/remove la clase para cambiar el subrayado.
let one = document.querySelector('.one span'); let two = document.querySelector('.two span') one.addEventListener('click',function(){ one.classList.add('effect'); two.classList.remove('effect') }); two.addEventListener('click',function(){ one.classList.remove('effect'); two.classList.add('effect') }); span { width: 11%; text-decoration: none; color: #333; display: inline-block; cursor:pointer; } .effect{ background-image: linear-gradient( #d9534f, #d9534f); background-repeat: no-repeat; background-position: bottom left; background-size: 50% 4px; } <nav> <a style="margin-left: 140px;" routerLink="totalUsers" routerLinkActive="active" id="uno" class="one"> <span class='effect'> Total Users</span> </a> <a routerLink="usersInformation" routerLinkActive="active" id="dos" class="two"><span> Users Information </span> </a> </nav>