text-decoration-line - Propriété CSS
Résumé des caractéristiques de la propriété text-decoration-line
none
| overline
| underline
| line-through
| blink
| grammar-error
| spelling-error
none
text-decoration-line
passe d'une valeur à l'autre sans transition.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
.
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:
;
- 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: blink; ✗
La ligne de décoration est clignotante. le texte ne doit pas clignoter. 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éfautcurrentcolor
. 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é).
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.
(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.
text-decoration-line
.
blink
. Attention le tableau est trompeur : la plupart des navigateurs reconnaissent la valeur mais ne la traite pas.
text-decoration-line
blink
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.