text-decoration-thickness

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

/* 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

auto | from-font | <length> | <percentage>

Exemples

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

.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

Spécification État Commentaires
CSS Text Decoration Module Level 4
La définition de 'text-decoration-width' dans cette spécification.
Version de travail Définition initiale.

Note : Cette propriété était initialement intitulée text-decoration-width mais fut renommée en 2019 en text-decoration-thickness.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
text-decoration-thicknessChrome Aucun support NonEdge Aucun support NonFirefox Support complet 70
Support complet 70
Support complet 69
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : text-decoration-width
Désactivée From version 69: this feature is behind the layout.css.text-decoration-width.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Support complet 12.1WebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet 12.2Samsung Internet Android Aucun support Non
percentage valuesChrome Aucun support NonEdge Aucun support NonFirefox Support complet 74IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi