La propriété text-decoration-line définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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 un mot-clé */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; /* Valeurs avec plusieurs mots-clés */ text-decoration-line: underline overline; /* On a deux décorations pour la ligne */ text-decoration-line: overline underline line-through; /* On a plusieurs décorations */ /* Valeurs globales */ text-decoration-line: inherit; text-decoration-line: initial; text-decoration-line: unset;
Valeurs
Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :
none- Aucune ligne ne décore le texte.
underline- Chaque ligne de texte est soulignée.
overline- Une ligne est dessinée au-dessus de chaque ligne de texte.
line-through- Une ligne est dessinée au milieu de chaque ligne de texte.
blink- Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les animations CSS pour obtenir un effet similaire.
Syntaxe formelle
none | [ underline || overline || line-through || blink ]
Exemples
HTML
<p>Voici un texte souligné avec une vaguelette rouge.</p>
CSS
p {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Text Decoration Module Level 3 La définition de 'text-decoration-line' 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 initiale | none |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | Oui | ? | 36 6 — 39 -moz- | Non | Oui | Oui -webkit- |
blink | 571 | ? | 261 | Non | 44 | ? |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui | Oui | ? | 36 6 — 39 -moz- | Oui | 8 -webkit- | Oui |
blink | 571 | 571 | ? | 261 | 44 | ? | 7.0 |
1. The blink value does not have any effect.
Voir aussi
- La propriété raccourcie
text-decorationqui permet, entre autres, de paramétrertext-decoration-line.