OUJOOD.COM
Tutoriel CSS : text-decoration-line
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.
Syntaxe générale
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" |
Valeurs possibles
Les valeurs possibles pour la propriété text-decoration-line sont :
- none : aucune décoration
- underline : soulignement
- overline : ligne au-dessus du texte
- line-through : ligne au milieu du texte (texte barré)
- blink : clignotement
- inherit : hérite de la valeur de décoration du parent
Exemples pratiques d'utilisation
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>
Astuces et conseils d'utilisation
- Utilisez la valeur none pour supprimer toute décoration par défaut sur un élément.
- Le clignotement (blink) n'est pas pris en charge par tous les navigateurs, utilisez-le avec précaution.
- Vous pouvez combiner plusieurs valeurs en utilisant la propriété raccourcie text-decoration :
- Vous pouvez aussi utiliser text-decoration-line en combinaison avec text-decoration-style et text-decoration-color
/* Combinaison de soulignement et de ligne au milieu */
span.highlight {
text-decoration: underline line-through;
}
Prise en charge de la propriété dans les navigateurs
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 |