Inverse une chaîne
Découvrez comment utiliser la propriété CSS text-decoration-line pour ajouter des décorations et des styles de texte à vos éléments HTML. Ce tutoriel complet vous guidera à travers les différentes valeurs possibles et vous donnera des exemples pratiques d'utilisation.
La propriété CSS text-decoration-line permet de spécifier le type de décoration à appliquer à un texte. Elle peut être utilisée pour ajouter des lignes, des traits, ou d'autres styles décoratifs à un texte.
La syntaxe générale de la propriété text-decoration-line est la suivante :
selector { text-decoration-line: value; }
Valeurs par défaut | none |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.textDecorationLine="overline" |
Les valeurs possibles pour la propriété text-decoration-line sont :
Voici quelques exemples d'utilisation de la propriété text-decoration-line:
/* Souligner un lien au survol */ a:hover { text-decoration-line: underline; } /* Barrer un élément après un clic */ button:active { text-decoration-line: line-through; }
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple : la propriété text-decoration-line css</title> <style> .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .overline { -webkit-text-decoration-line: overline; text-decoration-line: overline; } .line-through { -webkit-text-decoration-line: line-through; text-decoration-line: line-through; } .blink { -webkit-text-decoration-line: blink; text-decoration-line: blink; } .multilines { -webkit-text-decoration-line: underline overline line-through; text-decoration-line: underline overline line-through; } /* Styling for Pen, unrelated to text-decoration-line */ body { font-family: sans-serif; font-size: 2em; } </style> </head> <body> <h1>La propriété CSS text-decoration-line</h1> <p class="underline">text-decoration-line: underline;</p> <p class="overline">text-decoration-line: overline;</p> <p class="line-through">text-decoration-line: line-through;</p> <p class="multilines"> text-decoration-line: underline overline line-through;</p> </body> </html>
/* Combinaison de soulignement et de ligne au milieu */ span.highlight { text-decoration: underline line-through; }
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- ou -moz- indiquent la première version qui fonctionne avec un préfixe.
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 57.0 | 79.0 | 36.0 6.0 -moz- | 12.1 7.1 -webkit- | 44 |