text-decoration-style
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 janvier 2020.
La propriété CSS text-decoration-style définit le style appliqué sur les lignes visées par text-decoration-line. Le style s'applique à toutes les lignes définies avec text-decoration-line.
Exemple interactif
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
<section id="default-example">
<p>
Je préfère être
<span class="transition-all" id="example-element"
>heureux que d'avoir raison</span
>
n'importe quel jour.
</p>
</section>
p {
font: 1.5em sans-serif;
}
#example-element {
text-decoration-line: underline;
}
Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple <del> ou <s>). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.
Lors de la définition de plusieurs propriétés de décoration de ligne en même temps, il peut être plus pratique d'utiliser la propriété raccourcie text-decoration à la place.
Syntaxe
/* Valeurs avec des mots-clés */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Valeurs globales */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;
Valeurs
Définition formelle
| Valeur initiale | solid |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
text-decoration-style =
solid |
double |
dotted |
dashed |
wavy
Exemples
Définir un soulignement ondulé
Le code suivant crée un soulignement ondulé rouge :
CSS
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
HTML
<p class="wavy">Et voilà le résultat.</p>
Résultat
Spécifications
| Spécification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-style-property |
Compatibilité des navigateurs
Voir aussi
- Lors de la définition de plusieurs propriétés de décoration de ligne en même temps, il peut être plus pratique d'utiliser la propriété raccourcie
text-decorationà la place. - La propriété
text-decoration-line - La propriété
text-decoration-color - La propriété
text-decoration-thickness - La propriété
text-underline-offset