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.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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
/* 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
<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
.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;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-thickness-property |
Note :
La propriété s'appelait auparavant text-decoration-width, mais a été mise à jour en 2019 pour devenir text-decoration-thickness.
Compatibilité des navigateurs
Voir aussi
- La propriété
text-decoration - La propriété
text-underline-offset