text-decoration-style

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 visées (il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres).

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.

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

Valeurs

solid double dotted dashed wavy

Un des mots-clés suivants :

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.

Syntaxe formelle

solid | double | dotted | dashed | wavy

Exemples

CSS

.example {    
       -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;
}

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

HTML

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

Résultat

Spécifications

Compatibilité des navigateurs