Propriété CSS `text-decoration-thickness`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2021.

Voir la compatibilité complète
En savoir plus

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).

Exemple interactif

text-decoration-line: underline;
text-decoration-thickness: 3px;

text-decoration-line: line-through;
text-decoration-thickness: 0.4rem;

text-decoration-line: underline overline;
text-decoration-thickness: from-font;
font-size: 2rem;

<section id="default-example">
  <p id="example-element">
    La confusion m'a embrassé sur la joue, et a laissé un goût si amer
  </p>
</section>

p {
  font: 1.5em sans-serif;
  text-decoration-color: red;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* Valeurs de type longueur */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* Valeurs de type pourcentage */
text-decoration-thickness: 10%;

/* Valeurs globales */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
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>: Définit l'épaisseur de la ligne de décoration de texte en tant que longueur (<length>), remplaçant la suggestion du fichier de police ou la valeur par défaut du navigateur.
<percentage>: Définit l'épaisseur de la ligne de décoration de texte en tant que pourcentage (<percentage>) de 1em dans la police actuelle. Un pourcentage hérite comme une valeur relative, et donc s'adapte aux changements de police. Le navigateur doit utiliser un minimum de 1 pixel de dispositif. Pour une application donnée de cette propriété, l'épaisseur est constante sur toute la boîte à laquelle elle est appliquée, même si des éléments enfants ont une taille de police différente.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Pourcentages	se rapporte à la taille de la police de l'élément lui-même
Valeur calculée	comme défini
Type d'animation	par type de valeur calculée

Syntaxe formelle

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

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

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

Exemples

Varier l'épaisseur

HTML

html

<p class="thin">Voici du texte avec un soulignement rouge de 1px.</p>
<p class="thick">Voici du texte avec un soulignement rouge de 5px.</p>
<p class="shorthand">Ceci utilise la formulation raccourcie équivalente.</p>

CSS

css

.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;
}