Propriété CSS text-decoration
Utilisez la propriété CSS text-decoration pour définir le type, le style et la couleur de la décoration de texte. Valeurs et exemples.
La propriété CSS text-decoration ajoute des lignes décoratives au texte — le plus souvent le soulignement sous un lien, une ligne de barrage sur du texte supprimé, ou une surligne pour mettre en valeur. C'est la propriété à utiliser lorsque vous souhaitez ajouter (ou, tout aussi souvent, supprimer) ces lignes.
Cette page couvre la syntaxe abrégée, toutes les valeurs acceptées, son interaction avec ses propriétés détaillées, ainsi que les cas pratiques dans lesquels vous l'utilisez réellement (comme la mise en forme des liens).
Ce que fait text-decoration
En CSS3, text-decoration est une propriété abrégée qui définit trois propriétés détaillées à la fois :
- text-decoration-line — quelles lignes apparaissent (
underline,overline,line-through, ou plusieurs à la fois). - text-decoration-color — la couleur de la ligne (par défaut, la couleur du texte de l'élément,
currentColor). - text-decoration-style — le style de la ligne (
solid,double,dotted,dashed,wavy).
Étant une propriété abrégée, toute propriété détaillée omise est réinitialisée à sa valeur initiale. La ligne elle-même, text-decoration-line, a pour valeur par défaut none — ainsi, text-decoration: none est la façon canonique de supprimer le soulignement d'un lien.
Dans la spécification CSS1 originale, text-decoration n'était pas une propriété abrégée. C'était une propriété unique qui n'acceptait que ces mots-clés :
noneunderlineoverlineline-throughblink(désormais déprécié et ignoré par les navigateurs modernes)
La propriété abrégée CSS3 est un sur-ensemble de cette liste, de sorte que les anciennes déclarations à mot-clé unique comme text-decoration: underline fonctionnent toujours exactement comme avant.
Quand l'utiliser
- Supprimer le soulignement des liens :
a { text-decoration: none; }— puis ajoutez votre propre style au survol. - Signaler des modifications :
line-throughpour le texte supprimé,underlinepour le texte inséré. - Soulignements personnalisés : combinez une couleur et les styles
wavy/dottedpour des soulignements de type vérification orthographique ou des décorations de lien personnalisées.
Conseil d'accessibilité : Les soulignements constituent le repère conventionnel indiquant qu'un texte est un lien. Si vous les supprimez, rendez les liens identifiables d'une autre manière (une différence de couleur claire plus un soulignement au survol/focus), afin que le lien soit toujours évident pour chaque lecteur.
| Propriété | Détail |
|---|---|
| Valeur initiale | none currentColor solid (la valeur initiale de chaque propriété détaillée) |
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1, CSS3 |
| Syntaxe DOM | object.style.textDecoration = "underline dotted red"; |
Syntaxe
text-decoration: <line> <color> <style> | initial | inherit;<line>correspond à un ou plusieurs mots-cléstext-decoration-line(none,underline,overline,line-through).<color>est n'importe quelle valeur de couleur CSS.<style>est un mot-clétext-decoration-style(solid,double,dotted,dashed,wavy).
L'ordre des trois parties n'a pas d'importance, et vous pouvez en omettre n'importe laquelle. Plusieurs valeurs de ligne peuvent être combinées — par exemple underline overline dessine les deux à la fois :
/* underline, in red, with a wavy style */
text-decoration: underline wavy red;
/* two lines at once; color and style fall back to defaults */
text-decoration: underline overline;Exemple de la propriété text-decoration :
Exemple de la propriété CSS text-decoration avec les valeurs overline, line-through, underline et overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Résultat
Exemple de la propriété text-decoration avec une couleur spécifiée :
Exemple de la propriété CSS text-decoration avec la propriété text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Le préfixe -webkit- est omis ici, car les navigateurs modernes prennent entièrement en charge la propriété standard.
Exemple de la propriété text-decoration avec un style spécifié :
Exemple de la propriété CSS text-decoration avec les propriétés text-decoration-line et text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| text-decoration-line | Spécifie le type de décoration de texte. |
| text-decoration-color | Spécifie la couleur de la décoration de texte. |
| text-decoration-style | Spécifie le style de la décoration de texte. |
| initial | Applique la valeur par défaut à la propriété. |
| inherit | Hérite la propriété de l'élément parent. |
Propriétés associées
- text-decoration-line — définit la ou les lignes séparément.
- text-decoration-color — définit la couleur de décoration indépendamment de la couleur du texte.
- text-decoration-style — choisit des lignes solides, doubles, pointillées, en tirets ou ondulées.