text-decoration-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La propriété 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.

Note : Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.

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>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </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.

La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

Syntaxe

css

/* 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: unset;

Valeurs

solid: Dessine une ligne.
double: Dessine une double-ligne.
dotted: Dessiner une ligne avec des points.
dashed: Dessine une ligne avec des tirets.
wavy: Dessine une ligne ondulée.

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 spécifié
Type d'animation	discrète

Syntaxe formelle

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

Exemples

CSS

css

.exemple {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

html

<p class="exemple">Et voilà le résultat.</p>

Résultat

Spécifications

Specification
CSS Text Decoration Module Level 3 # text-decoration-style-property

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie text-decoration qui permet, entre autres, de paramétrer text-decoration-style.