Souligner les liens dans la barre de navigation en CSS/HTML

J'ai l'soulignant partie vers le bas. Je suis juste essayer d'obtenir le souligner lui-même plus loin dans le texte. De plus, cela se produit lorsque je hover, qui je veux.

Par exemple:

Maison

Quelque chose comme ça.

Mon code pour l'instant:

#menu a:hover {
color: #FFF;
background-color: #252525;
text-decoration:underline;
}

Si plus d'information est nécessaire, s'il vous plaît laissez-moi savoir.

double possible de css, souligner, possible d'augmenter gap
Pour cela, vous aurez besoin padding-bottom et un border-bottom, comme le souligne le texte de balisage et ne peut pas être modifié.

OriginalL'auteur MLomax94 | 2015-04-08

  1. 7

    Utilisation border-bottom au lieu de underline de sorte que vous pouvez utiliser rembourrage pour manipuler l'espace entre votre lien et le trait de soulignement comme ceci:

    HTML:

    <div id="menu">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

    CSS:

    #menu a {
    color: #FFF;
    background-color: #252525;
    text-decoration: none;
    border-bottom: transparent solid 1px;
    padding-bottom: 5px;
}
#menu a:hover {
    color: #FFF;
    background-color: #252525;
    border-bottom: red solid 1px;
}

    Voici un jsfiddle avec des codes ci-dessus: https://jsfiddle.net/AndrewL32/e0d8my79/39/

    Merci, Andrew. C'est exactement ce que je cherchais. 🙂
    Content d'avoir pu aider 🙂

    OriginalL'auteur AndrewL64