text-decoration-thickness

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété CSS text-decoration-thickness définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).

Syntaxe

css
/* Un seul mot-clé*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* Une valeur de longueur */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* Valeurs globales */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: unset;

Valeurs

auto

Le navigateur choisit l'épaisseur pour la ligne de décoration.

from-font

Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de auto.

<length>

Specifies the thickness of text decoration line as a <length>, overriding the font file suggestion or the browser default.

Syntaxe formelle

text-decoration-thickness = 
  auto                 |
  from-font            |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

HTML

html
<p class="longhand">Voici du texte avec un soulignement rouge de 2px.</p>
<p class="under-and-over">Celui est souligné et surligné.</p>
<p class="shorthand">
  Ce texte sera souligné avec une ligne bleue de 1px si la formulation
  raccourcie est prise en charge.
</p>

CSS

css
.longhand {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

.under-and-over {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
  text-decoration-color: orange;
  text-decoration-thickness: 0.2rem;
}

.shorthand {
  text-decoration: underline solid blue 1px;
}

Résultat

Spécifications

Specification
CSS Text Decoration Module Level 4
# text-decoration-width-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi