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 March 2021.

* Some parts of this feature may have varying levels of support.

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.
: Specifies the thickness of text decoration line as a , overriding the font file suggestion or the browser default.

Syntaxe formelle

text-decoration-thickness = 
  auto                 |
  from-font            |
    

 = 
        |

Exemples

HTML

html

Voici du texte avec un soulignement rouge de 2px.
Celui est souligné et surligné.

  Ce texte sera souligné avec une ligne bleue de 1px si la formulation
  raccourcie est prise en charge.

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