Tengo un enlace que consiste en un icono (un glyphicon de Bootstrap) y un texto. En estado normal el enlace está sin subrayar y cuando se pasa el ratón por encima se subraya.
El problema es que, cuando paso el ratón por encima del enlace y éste se subraya, también se subraya el espacio en blanco que existe entre el icono y el texto y se ve mal. ¿Cómo puedo evitar ese efecto?
Éste es el código:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<div id="login">
<a href="#">
<i class="glyphicon glyphicon-lock" aria-hidden="true"></i> Login
</a>
</div>