4

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>

0

2 respuestas 2

3

He quitado el espacio del > Login y le he dado al icono un padding-right: 5px;

.glyphicon-lock {
  padding-right: 5px;
}
<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>

1
  • 1
    oh que simple y que genio hahah
    – lois6b
    Commented el 18 nov. 2016 a las 12:56
2

Yo suelo separar los elementos internos de los enlaces o botones con span, así puedo controlar cada elemento de forma independiente.

.Boton:hover {
  text-decoration: none;
}

.Boton:hover .Boton__text {
  text-decoration: underline;
}
<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 class="Boton" href="#">
    <i class="Boton__icon glyphicon glyphicon-lock" aria-hidden="true"></i>
    <span class="Boton__text">Login</span>
  </a>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.