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.

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

/* 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.

Syntaxe formelle

solid | double | dotted | dashed | wavy

Exemples

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

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

Résultat

Spécifications

Spécification État Commentaires
CSS Text Decoration Module Level 3
La définition de 'text-decoration-style' dans cette spécification.
Candidat au statut de recommandation Définition initiale. La propriété text-decoration n'était pas une propriété raccourcie auparavant.

Valeur initialesolid
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 57Edge Aucun support NonFirefox Support complet 36
Support complet 36
Aucun support 6 — 39
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 44Safari Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Aucun support NonFirefox Android Support complet 36
Support complet 36
Aucun support 6 — 39
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 44Safari iOS Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 7.0
wavyChrome Support complet 57Edge Aucun support NonFirefox Support complet 6IE Aucun support NonOpera Support complet 44Safari Support complet OuiWebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Aucun support NonFirefox Android Support complet 6Opera Android Support complet 44Safari iOS Support complet OuiSamsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

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

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,