Alguien tiene alguna idea de como modificar un pseudo elemento con jquery? En una barra de menu de una pagina web, agregue pseudo elementos para subrayar el boton cuando se hace hover, pero quiero hacer que se mantenga subrayado el boton en el que se encuentra actualmente.
Al hacer Hover:
El codigo html es:
<ul>
<a href="index.php"><li>INICIO</li></a>
<a href="deportes.html"><li>DEPORTES</li></a>
<a href="edicion.html"><li>VIDEOS</li></a>
<a href="noticia.php"><li>VIRALES</li></a>
<a href="contacto.html"><li>CONTACTO</li></a>
</ul>
Y el codigo css es:
header ul li{
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
list-style: none;
color: #000;
padding: 15px 20px;
transition: 0.2s;
position: relative;
}
header ul li:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom:3px solid #83354F;
opacity: 0;
}
header ul li:hover:before{
cursor: pointer;
opacity: 1;
}
Quisera que quede como tiene youtube o como tienen otras paginas: