<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>

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;
}