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

Voici un moyen d'y parvenir :

HTML :

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS :

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}​

Voici un exemple : http://jsfiddle.net/AQ9rL/

Answer 2

Récemment, j'ai dû faire face à un FF dont les soulignements étaient trop épais et trop éloignés du texte dans FF, et j'ai trouvé une meilleure façon de gérer cela en utilisant une paire de box-shadows :

.custom-underline{
  box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

La première ombre est placée au-dessus de la seconde et c'est ainsi que vous pouvez contrôler la seconde en faisant varier la valeur 'px' des deux.

Plus : différentes couleurs, épaisseurs et positions de soulignement.

Moins : ne peut pas être utilisé sur des fonds non solides

Ici, j'ai fait quelques exemples : http://jsfiddle.net/xsL6rktx/

Answer 3

Il y a text-decoration-thickness qui fait actuellement partie de Module de décoration de texte CSS Niveau 4 . Il est à l'étape du "brouillon de l'éditeur", donc c'est un travaux en cours et sous réserve de modifications. A partir de janvier 2020, il n'est pris en charge que par Firefox et Safari .

La propriété CSS text-decoration-thickness définit l'épaisseur ou la largeur de la décoration. largeur, de la ligne de décoration utilisée pour le texte d'un élément, par exemple comme une ligne traversante, un soulignement ou un surlignage.

a {
  text-decoration-thickness: 2px;
}

Codepen : https://codepen.io/mrotaru/pen/yLyLOgr (Firefox uniquement)

---

Il y a aussi text-decoration-color qui fait partie de Module de décoration de texte CSS Niveau 3 . Cette dernière est plus mature (recommandation candidate) et est prise en charge par la plupart des principaux navigateurs (à l'exception de Edge et IE). Bien sûr, elle ne peut pas être utilisée pour modifier l'épaisseur du trait, mais elle peut être utilisée pour obtenir un soulignement plus "atténué" (également illustré dans le codepen).

Answer 4

Très simple ... à l'extérieur de l'élément "span" avec une petite police et un soulignement, et à l'intérieur de l'élément "font" avec une plus grande taille de police.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Answer 5

Une autre façon de procéder consiste à utiliser ":after" (pseudo-élément) sur l'élément que vous souhaitez souligner.

h2 {
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;
}