La propriété CSS text-decoration-line
Utilisez text-decoration-line pour définir le type de ligne de décoration du texte. Découvrez les valeurs et des exemples pratiques.
La propriété text-decoration-line définit le type de ligne utilisé pour la décoration du texte — un underline, un overline, un line-through, ou toute combinaison de ces valeurs.
Il s'agit de l'une des quatre propriétés longhand qui composent la propriété raccourcie text-decoration, les autres étant text-decoration-color, text-decoration-style, et text-decoration-thickness. Utilisez text-decoration-line seule lorsque vous souhaitez uniquement modifier quelles lignes apparaissent, sans toucher à la couleur, au style et à l'épaisseur.
Cette page couvre les valeurs acceptées par la propriété, comment combiner plusieurs lignes simultanément, la relation avec la propriété raccourcie, ainsi que quelques pièges pratiques.
La propriété text-decoration-line est entièrement prise en charge par tous les navigateurs modernes sans préfixes propriétaires. C'est l'une des propriétés CSS3.
Pourquoi utiliser text-decoration-line
Une raison courante d'utiliser la propriété longhand est d'ajouter ou de supprimer une seule ligne sans perturber le reste de la décoration. Par exemple, les liens sont soulignés par défaut ; en définissant text-decoration-line: none, ce soulignement est supprimé tout en vous permettant de définir ultérieurement une couleur de soulignement personnalisée via la propriété raccourcie. La propriété accepte également plusieurs mots-clés, ce qui permet de placer un soulignement et un overline sur le même texte en une seule déclaration.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritage | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textDecorationLine = "overline underline"; |
Syntaxe
Syntaxe CSS de text-decoration-line
text-decoration-line: none | [ underline || overline || line-through ] | initial | inherit;Le mot-clé none est utilisé seul, mais underline, overline et line-through peuvent être combinés dans une seule déclaration, séparés par des espaces, et l'ordre n'a pas d'importance :
/* a single line */
text-decoration-line: underline;
/* two lines at once */
text-decoration-line: underline overline;
/* all three */
text-decoration-line: underline overline line-through;Exemple de la propriété text-decoration-line :
Exemple de code CSS pour text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Résultat
Exemple de la propriété text-decoration-line avec la valeur "underline" :
Exemple CSS de text-decoration-line avec la valeur underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemple de la propriété text-decoration-line avec la valeur "line-through" :
Exemple CSS de text-decoration-line avec la valeur line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemple de la propriété text-decoration-line avec toutes les valeurs :
Exemple CSS de text-decoration-line avec toutes les valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Combinaison de text-decoration-line avec la propriété raccourcie
Étant donné que text-decoration-line contrôle uniquement les lignes, vous l'associez généralement aux autres propriétés longhand — ou utilisez simplement la propriété raccourcie text-decoration, qui les définit toutes en même temps. Ces deux règles produisent le même résultat :
/* longhands */
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
/* shorthand equivalent */
p {
text-decoration: underline red wavy;
}Recourir à la propriété longhand est avantageux lorsque vous souhaitez remplacer une seule valeur sans réécrire toute la décoration — par exemple, changer uniquement le type de ligne au survol (:hover) tout en conservant une couleur et un style hérités.
Note d'accessibilité
text-decoration-line: line-through est purement visuel : les technologies d'assistance n'annoncent pas que le texte est barré. Pour indiquer « ce contenu a été supprimé » aux utilisateurs de lecteurs d'écran, utilisez l'élément sémantique <del> ou <s> plutôt que de vous fier uniquement au CSS.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | Aucune ligne n'est définie. | Essayer » |
| underline | Définit une ligne sous le texte. | Essayer » |
| overline | Définit une ligne au-dessus du texte. | Essayer » |
| line-through | Définit une ligne traversant le texte. | Essayer » |
| initial | Rétablit la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite la valeur de la propriété depuis l'élément parent. |
La propriété text-decoration-line prenait auparavant en charge une valeur blink qui faisait clignoter le texte. Cette valeur est désormais dépréciée et la plupart des navigateurs l'ignorent ; ne l'utilisez donc pas dans du nouveau code.
Propriétés associées
- text-decoration — la propriété raccourcie qui définit simultanément la ligne, la couleur, le style et l'épaisseur.
- text-decoration-color — définit la couleur de la ligne de décoration.
- text-decoration-style — définit le style de la ligne :
solid,double,dotted,dashedouwavy.