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

Question

J'ai la partie soulignée vers le bas. J'essaie simplement d'éloigner le soulignement du texte. En outre, cela se produit lorsque je plane, ce que je veux.

Par exemple:

Accueil

---

Quelque chose comme ça.

Mon code à ce jour:

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

Answer 1

utilisation border-bottom au lieu de underline vous pouvez donc utiliser un rembourrage pour déterminer la quantité d'espace entre votre lien et le 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 une jsfiddle avec les codes ci-dessus: https://jsfiddle.net/AndrewL32/e0d8my79/39/