Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-decoration-line - Propriété CSS

text-decoration-line

Résumé des caractéristiques de la propriété text-decoration-line

Description rapide
Type de décoration : souligné, barré, etc.
Statut
Standard
Valeurs prédéfinies
none | overline | underline | line-through | blink | grammar-error | spelling-error
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
NON (propagation suivant un autre mécanisme).
Type d'animation
Discrète : lors d'une animation, la propriété text-decoration-line passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Décoration du texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Description.

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)

(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.

Parent
Enfant 1
Enfant 2
Enfant 3

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.

Syntaxes pour text-decoration-line.

text-decoration-line:
 none none underline underline overline overline line-through line-through blink blink esp esp spelling-error spelling-error grammar-error grammar-error
;
  • 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.

    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: 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; text-decoration-line: inherit; text-decoration-line: revert; text-decoration-line: revert-layer; text-decoration-line: unset;

    La valeur initiale est : none.

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

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

Démonstration

Simulateur.

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. Quant aux valeurs spelling-error et grammar-error, il est probable qu'elles ne seront pas reconnues.


Mode d'écriture :

text-decoration-line :
Un quetzal réfugié en kimono achète dix pyjamas verts sur le Web. (1)

(1) Pangramme anonyme.

Prise en charge par les navigateurs (compatibilité).

text-decoration-line est une propriété reconnue par tous les navigateurs. Il reste cependant quelques problèmes de compatibilité sur les deux valeurs nouvellement ajoutées : spelling-error et grammar-error.
D'autre part, la valeur blink est obsolète : utilisez plutôt une animation.

Colonne 1
Prise en charge par les navigateurs de la propriété CSS text-decoration-line.
Colonne 2
Traitement de la valeur blink. Attention le tableau est trompeur : la plupart des navigateurs reconnaissent la valeur mais ne la traite pas.
1
text-decoration-line
2
Valeur blink
Estimation de la prise en charge en pourcentage du parc actuel.
94%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que text-decoration-line.

Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration-line fait partie du Module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Choisit le soulignement, le surlignement ou la rayure du texte.
Définit la couleur du trait de décoration.
Propriété raccourcie définissant certaines particularités relatives aux décorations.
Définit comment les décorations héritées des éléments parents doivent être appliquées.
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
Définit comment les décorations de l'élément lui même (et non pas celles des éléments parents) doivent être appliquées.
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
Type de trait pour la décoration : plein, pointillé, etc.
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Mise en exergue du texte.
Définit la couleur des caractères de mise en exergue.
Position des caractères de mise en exergue.
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
Style de mise en exergue.
Définit tous les paramètres d'une ombre appliquée au texte.
Définit la position du trait de soulignement, par rapport à la position de base.
Définit l'emplacement des traits de soulignement.