espace de texte-décoration entre objet

Question

Comment puis-je avoir de l'espace entre la bordure (underline effet de survol). et la couleur de la ligne devrait être rouge.

a { 
 
    text-decoration: none 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li:hover { 
 
    text-decoration: underline; 
 
}

<li><a href=""> 
 
    abc 
 
</a></li> 
 
<li><a href=""> 
 
    def 
 
</a></li> 
 
<li><a href=""> 
 
    ggg 
 
</a></li> 
 
<li><a href=""> 
 
    hello 
 
</a></li>

Answer 1

Si vous utilisez text-decoration il va créer la ligne par défaut, mais si vous voulez utiliser sur mesure puis border-bottom au lieu de changer les couleurs et la taille de la ligne et le rembourrage pour l'espacement entre les deux.

a { 
 
    text-decoration: none 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li:hover { 
 
    border-bottom:1px solid red; 
 
    padding-bottom:5px; 
 
}

<li><a href=""> 
 
    abc 
 
</a></li> 
 
<li><a href=""> 
 
    def 
 
</a></li> 
 
<li><a href=""> 
 
    ggg 
 
</a></li> 
 
<li><a href=""> 
 
    hello 
 
</a></li>

Answer 2

utilisation border-bottom et padding à la place

a { 
 
    text-decoration: none 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li:hover { 
 
    border-bottom: 1px solid red; 
 
    padding-bottom: 10px; 
 
}

<li><a href=""> 
 
    abc 
 
</a> 
 
</li> 
 
<li><a href=""> 
 
    def 
 
</a> 
 
</li> 
 
<li><a href=""> 
 
    ggg 
 
</a> 
 
</li> 
 
<li><a href=""> 
 
    hello 
 
</a> 
 
</li>

Answer 3

Depuis votre balise de fermeture </a> est sur les navigateurs de nouvelle ligne HTML et l'effondrement de plusieurs espaces dans un sp as c'est pourquoi vous voyez cela souligner dans l'espace blanc. Par conséquent, la première option (un peu fastidieuse) consiste à fermer vos balises de fin juste après le texte.

, vous devez également modifier votre dernière CSS à li:hover a

a { 
 
    text-decoration: none 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li:hover a { 
 
    text-decoration: underline; 
 
}

<li><a href=""> 
 
    abc</a> 
 
</li> 
 
<li><a href=""> 
 
    def</a> 
 
</li> 
 
<li><a href=""> 
 
    ggg</a> 
 
</li> 
 
<li><a href=""> 
 
    hello</a> 
 
</li>

Answer 4

a { 
 
    text-decoration:none; 
 
    display:block; 
 
     position:relative; 
 
     padding-bottom:20px; 
 
    } 
 

 
    li{ 
 
    display:inline-block; 
 
     
 
    } 
 
    li:hover a:after { 
 
     content:""; 
 
     position:absolute; 
 
     height:1px; 
 
     width:100%; 
 
     left:0; 
 
     bottom:0; 
 
     background:red; 
 
     
 
    }

<li><a href=""> 
 
     abc 
 
    </a> 
 
    </li> 
 
    <li><a href=""> 
 
     def 
 
    </a> 
 
    </li> 
 
    <li><a href=""> 
 
     ggg 
 
    </a> 
 
    </li> 
 
    <li><a href=""> 
 
     hello 
 
    </a> 
 
    </li>