J'ai cherché sur le net, mais je n'ai trouvé aucune solution pour cela.

Je veux aussi souligner pour les crochets.

a {
  text-decoration: underline;
}
<a href='#'>hhh(9)</a>
0
Keerthi Reddy Yeruva 23 mai 2018 à 11:46

4 réponses

Meilleure réponse

En effet, dans une version récente de Chrome (version 64), ils semblent avoir activé { {X0}} dans les styles d'agent utilisateur par défaut et l'avez défini sur auto. Pour supprimer cela, ajoutez ceci à votre CSS (s'appliquera à tous les styles):

* {
  text-decoration-skip-ink: none;
}

Plus d'informations à ce sujet sur MDN :

La propriété CSS text-decoration-skip-ink spécifie comment les surlignages et les soulignements sont dessinés lorsqu'ils passent sur les ascendeurs et descendants de glyphe.

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

Voici un exemple utilisant votre code ci-dessus:

a {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
<a href='#'>hhh(9)</a>
8
23 mai 2018 à 10:27

Vous pouvez utiliser la bordure inférieure si vous voulez que le crochet soit souligné ^^

a{
text-decoration:none;
border-bottom : 1px solid;
}
<a href='#'>hhh(9)</a>
3
beginnerprogrammer 23 mai 2018 à 08:52

Il est souligné.

Regardez l'exemple ci-dessous. Diriez-vous que le caractère p n'est pas souligné?

a {
  text-decoration:underline;
}
<a href='#'>hhh(9)</a><br>
<a href="#">[a][a]</a><br>
<a href="#">ppap</a><br>

Si vous avez vraiment besoin d'une ligne sous ces caractères, utilisez une bordure.

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
<a href='#'>hhh(9)</a><br>
<a href="#">[a][a]</a><br>
<a href="#">ppap</a><br>
2
yqlim 23 mai 2018 à 08:53

Les crochets ne sont pas soulignés uniquement à cause du navigateur récent comme chrome enable text-decoration-skip-ink

Vous devez écrire ce shortcode dans votre CSS

* {
  text-decoration-skip-ink: none;
}

a{
 text-decoration:underline;
}

<a href="#">underline text with () brackets</a>
0
Ashique Hussain Ansari 23 mai 2018 à 09:17