Comment s'assurer que le soulignement épais fonctionne sur les sauts de ligne ?

Question

J'utilise le code suivant pour ajouter une décoration de soulignement plus épaisse/plus stylisée à mes hyperliens.

a { text-decoration: none position: relative;}

a: survol { couleur : #c0632e }

a::after { contenu : "" position : absolue largeur : 100 % hauteur : 30 % ;
        bas : 0 ; gauche : 0 ; couleur d'arrière-plan : #2EB0C0 ;
        opacité : 0,15 ; indice z : -1 ;
    
a:hover::after { background-color: #c0632e }

Cependant, cela ne fonctionne que si je le convertis en classe et que je l'ajoute à chaque lien sous la forme . Si j'essaie de l'implémenter globalement, cela ne fonctionne pas lorsqu'il y a une nouvelle ligne au milieu du lien hypertexte. Cela fonctionne bien lorsqu'il n'y a pas de sauts de ligne, mais pas lorsqu'il y a des sauts de ligne.

Existe-t-il un moyen de résoudre ce problème afin qu'il puisse être utilisé globalement sans avoir à définir

Answer 1

J'ai également rencontré le même problème récemment. Je vous suggère d'utiliser border bottom au lieu de ::after. Essayez ceci :

a {
    border-bottom: 1rem solid;
}

Vous pouvez également utiliser px pour spécifier la taille au lieu de rem. N'oubliez pas de préciser la couleur de la bordure si elle n'apparaît pas

border-color: black;