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
/* 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
<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
Specification |
---|
CSS Text Decoration Module Level 4 # text-decoration-width-property |
Compatibilité des navigateurs
BCD tables only load in the browser