CSS Décoration de Texte

Décoration de Texte CSS

La propriété CSS text-decoration est utilisée pour contrôler l'apparence des lignes décoratives sur le texte.

C'est une propriété abrégée qui regroupe les propriétés individuelles suivantes :

Ajouter une Ligne de Décoration au Texte

La propriété CSS text-decoration-line définit le type de ligne de décoration ajoutée au texte.

Cette propriété peut avoir une ou plusieurs des valeurs suivantes :

  • none - Valeur par défaut. N'affiche aucune ligne de décoration
  • underline - La ligne de décoration est affichée sous le texte
  • overline - La ligne de décoration est affichée au-dessus du texte
  • line-through - La ligne de décoration est affichée à travers le texte

Astuce : Vous pouvez combiner plusieurs valeurs, comme overline et underline, pour afficher des lignes à la fois au-dessus et en dessous d'un texte.

Exemple

Définir différents types de lignes de décoration :

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}
Essayez-le Vous-Même »

Remarque : Il n'est pas recommandé de souligner un texte qui n'est pas un lien, car cela peut souvent confondre le lecteur !

Spécifier une Couleur pour la Ligne de Décoration

La propriété CSS text-decoration-color est utilisée pour définir la couleur de la ligne de décoration.

Exemple

Ajouter différentes couleurs à la ligne de décoration :

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
Essayez-le Vous-Même »

Spécifier un Style pour la Ligne de Décoration

La propriété CSS text-decoration-style est utilisée pour définir le style de la ligne de décoration.

Cette propriété peut avoir l'une des valeurs suivantes :

  • solid - Valeur par défaut. Affiche la ligne comme une ligne unique
  • double - Affiche la ligne comme une double ligne
  • dotted - Affiche la ligne comme une ligne pointillée
  • dashed - Affiche la ligne comme une ligne en pointillés
  • wavy - Affiche la ligne comme une ligne ondulée

Exemple

Ajouter différents styles à la ligne de décoration :

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Essayez-le Vous-Même »

Spécifier l'Épaisseur de la Ligne de Décoration

La propriété CSS text-decoration-thickness est utilisée pour définir l'épaisseur de la ligne de décoration.

Exemple

Ajouter différentes épaisseurs pour la ligne de décoration :

h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
Essayez-le Vous-Même »

La Propriété Abrégée

La propriété CSS text-decoration est une propriété abrégée pour :

Exemple

h1 {
text-decoration: underline;
}

h2 {
text-decoration: underline red;
}

h3 {
text-decoration: underline red double;
}

p {
text-decoration: underline red double 5px;
}
Essayez-le Vous-Même »

Un Petit Conseil sur les Liens

Tous les liens en HTML sont soulignés par défaut. Parfois, vous pouvez voir des liens stylisés sans soulignement. La propriété text-decoration: none; est utilisée pour supprimer le soulignement des liens, comme ceci :

Exemple

a {
text-decoration: none;
}
Essayez-le Vous-Même »

Toutes les Propriétés CSS de Décoration de Texte

Propriété Description
text-decoration Définit toutes les propriétés de décoration de texte en une seule déclaration
text-decoration-color Spécifie la couleur de la décoration de texte
text-decoration-line Spécifie le type de décoration de texte à utiliser (souligné, surligné, etc.)
text-decoration-style Spécifie le style de la décoration de texte (solide, pointillé, etc.)
text-decoration-thickness Spécifie l'épaisseur de la ligne de décoration de texte