Text-decoration-line - Propriété CSS

(1) Propagation suivant un autre mécanisme, différent de l'héritage classique.
Voir à ce sujet le paragraphe sur le mécanise de propagation.

Syntaxe de text-decoration-line (schéma).

Description de la propriété text-decoration-line.

La propriété text-decoration-line définit le type de décoration à ajouter au texte : souligné, surligné, barré, etc.

Soulignement   Surlignement   Rayure   Clignotement ⁽¹⁾

(1) Le clignotement est obsolète. Votre navigateur ne le gère probablement pas.

La propriété text-decoration-line est naturellement adaptable à la langue : le trait de décoration peut se retrouver à droite ou à gauche du texte si ce dernier est écrit verticalement (langues CJK par exemple).

Une présentation plus générale des décorations est disponible sur la page de la propriété résumée text-decoration.

Particularité concernant l'héritage des décorations.

Toutes les propriétés relatives aux décorations du texte ont un mode d'héritage inhabituel. Tout d'abord, l'héritage ne se fait que pour les éléments avec certains types d'affichage block, block, flex, grid, table, etc. Les éléments du type inline-block, inline-table, inline-grid, etc. n'héritent pas de la valeur de text-decoration-line.

De plus, lorsque text-decoration-line hérite sa valeur d'un ascendant, il n'est pas possible de surcharger cette valeur comme avec le mécanisme d'héritage classique. L'exemple ci-dessous illustre ce mécanisme. L'élément parent définit un soulignement du texte, dont le premier enfant hérite tout naturellement. Le deuxième enfant par contre tente de remplacer le soulignement par un surlignement. Et là ça ne marche pas : on n'a pas remplacé la décoration, mais on en a ajouté une deuxième.
Plus surprenant encore, l'enfant numéro 3 demande à ce qu'il n'y ait pas de décoration ( text-decoration-line:none; ). Et là encore le résultat n'est pas celui escompté : le texte est toujours souligné.

Tout se passe comme si un élément descendant ne pouvait pas supprimer les décorations définies par un parent. Une nouvelle propriété devrait permettre de résoudre ce problème : voir text-decoration-skip.

Reportez-vous à la page Le mécanisme de propagation des décorations pour plus de détails sur la propagation des décorations aux éléments descendants.

Valeurs pour text-decoration-line.

• text-decoration-line: none;

  Pas de décoration ajoutée.

  Texte non décoré
• text-decoration-line: underline;

  La décoration est ajoutée en dessous du texte. cela peut être un trait (soulignement), un trait double, ou n'importe quelle autre possibilité définie par text-decoration-style.

  Notez que le trait est interrompu pour ne pas couper les jambages des lettres (voir text-decoration-skip).

  Soulignement
• text-decoration-line: overline;

  La décoration est ajoutée au dessus du texte (surlignement).

  Surlignement
• text-decoration-line: line-through;

  La décoration est ajoutée par dessus le texte. Cela peut-être utilisé pour rayer un mot ou une phrase par exemple.

  Rayure du texte
• text-decoration-line: underline line-through;

  Plusieurs valeurs peuvent être énumérées, séparées par un espace. Le résultat est l'accumulation de toutes ces valeurs.
  Remarque : il ne sera pas possible de définir des couleurs ou des styles différents pour ces décorations.

  Soulignement et rayure
• text-decoration-line: blink; ✗

  La ligne de décoration est clignotante. Cette valeur est obsolète : les navigateurs ne considèrent pas forcément cette valeur comme une erreur de syntaxe, mais ils se contentent de l'ignorer.

  Le clignotement est en effet fortement déconseillé dans le document officiel du W3C : Préconisations d'accessibilité pour les navigateurs .

  Si vraiment vous voulez du clignotement, utilisez à la place une animation CSS pour obtenir un clignotement (voir la propriété animation).

  Clignotement
• text-decoration-line: spelling-error; text-decoration-line: grammar-error;

  Ces deux valeurs appliquent une décoration identique à celles utilisées par le navigateur pour signaler une faute d'orthographe ou une faute de grammaire. Il s'agit généralement d'un trait ondulé rouge pour les fautes d'orthographes, et d'un trait ondulé vert pour les fautes de grammaire. Mais ces caractéristiques sont dépendantes du navigateur et du système d'exploitation.

  Avec ces deux valeurs, text-decoration-line peut interférer avec les autres propriétés relatives aux décorations, par exemple la couleur. Sur l'exemple ci-dessous, aucune couleur n'a a été demandée, le soulignement devrait donc être dans la couleur par défaut currentcolor. Or ce n'est pas le cas, et la propriété text-decoration-color sera inopérante pour changer ça.

  Faute d'orthographe
  Faute de grammaire
• text-decoration-line: initial; (none) text-decoration-line: inherit; text-decoration-line: revert; text-decoration-line: revertLayer; text-decoration-line: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété text-decoration-line.

L'animation ci-dessous explore les principales options de décoration existantes (souligné, rayé, surligné).

Simulateur avec la propriété text-decoration-line.

Ce simulateur vous permet d'explorer les différentes sortes de décoration, ainsi que leur prise en charge par le navigateur sur lequel vous visualisez cette page. La valeur blink ne sera à coup sûr pas reconnue, même si elle ne s'affiche pas en erreur.

(1) Pangramme anonyme.

Support de text-decoration-line.

text-decoration-line est une propriété reconnue par tous les navigateurs.
Notez que la valeur blink est obsolète : elle eset reconnue par les navigateurs pour des raisons de compatibilité mais ne produite aucun effet. Utilisez plutôt une animation.

Remarques :

(1) La valeur blink est acceptée mais n'a aucun effet.

1

Propriété
text-decoration-line

2

Valeur
blink

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

1

Edge

1

Opéra

Safari

Safari sur IOS

Androïd Brower

1

Chrome pour Androïd

1

Firefox pour Androïd

1

Samsung Internet

1

Firefox

1

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la propriété text-decoration-line.

• Module CSS - Décoration du texte - Niveau 3

  Concernant text-decoration-line. Première présentation de la propriété text-decoration-line.
  

  27 Janvier 1999

  Document de travail.

  

  01 Août 2013

  Candidat à la recommandation.

  

  

• Module CSS - Décoration du texte - Niveau 4

  Concernant text-decoration-line. Ajout des valeurs spelling-error et grammar-error pour la propriété text-decoration-line.
  

  13 Mars 2018

  Document de travail.

  

  

  

Voir aussi, au sujet des décorations de texte.

Le module de spécification Module CSS - Décoration du texte regroupe les attributs de décoration de texte : mise en emphase, ombrage, rayure, etc. La propriété text-decoration-line est décrite dans ce module, ainsi que les propriétés suivantes :

Propriétés :