Modifier l'épaisseur du trait de l'attribut CSS "underline".

Question

Puisque vous pouvez souligner n'importe quel texte en CSS comme ceci :

h4 {
  text-decoration: underline;
}

Comment pouvez-vous également modifier la "ligne" qui est dessinée ? La couleur que vous obtenez sur la ligne peut être facilement spécifiée comme suit color: red mais comment modifier la hauteur de la ligne, c'est-à-dire son épaisseur ?

Answer 1

Maintenant, comme on peut le voir dans l'image ci-dessous, la propriété est entièrement supportée dans la plupart des navigateurs (selon Mozilla ).

Ainsi, vous pouvez utiliser les attributs suivants :

.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}

(exemple de code tiré de Mozilla ).