text-decoration
Ajoute ou supprime des lignes au niveau du texte : souligné, barré, ligne au-dessus.
- Valeur initiale
none currentcolor solid auto- Héritée
- Non
- Animable
- couleur et épaisseur
- S’applique à
- tous les éléments
- JavaScript
element.style.textDecoration = "underline"
Exemple
#.link {
text-decoration: underline;
text-decoration-color: #a78bfa;
text-underline-offset: 4px;
}
.old-price {
text-decoration: line-through;
}<p style="margin: 0 0 8px"><a class="link" href="#" style="color: #fff; text-decoration: underline; text-decoration-color: #a78bfa; text-underline-offset: 4px;">Voir les tarifs</a></p>
<p style="margin: 0"><span class="old-price" style="text-decoration: line-through; color: #737373;">49 €</span> <strong>29 €</strong></p>Définition et utilisation
#La propriété text-decoration est un raccourci pour text-decoration-line (le type de ligne), text-decoration-style (le style), text-decoration-color (la couleur) et text-decoration-thickness (l’épaisseur). Vous pouvez donc écrire par exemple underline wavy #f43f5e.
On l’utilise le plus souvent pour les liens : text-decoration: none supprime le soulignement par défaut, et on peut le rétablir dans l’état :hover. line-through, de son côté, barre le texte, par exemple un ancien prix ou une tâche terminée.
Vous réglez la distance entre le soulignement et le texte avec la propriété séparée text-underline-offset, ce qui permet de créer des soulignements élégants, détachés des lettres.
Syntaxe
#text-decoration: <type de ligne> || <style> || <couleur> || <épaisseur>;Valeurs
#- Un texte sans aucune ligne.
- Une ligne sous le texte, comme dans les liens.
- Une ligne qui traverse le texte.
- Une ligne au-dessus du texte.
- Une ligne ondulée et colorée, comme pour signaler une faute d’orthographe.
- Une ligne épaisse et colorée.
Valeurs en pratique
#none
.demo { text-decoration: none; }underline
.demo { text-decoration: underline; }line-through
.demo { text-decoration: line-through; }overline
.demo { text-decoration: overline; }underline wavy #f43f5e
.demo { text-decoration: underline wavy #f43f5e; }underline 3px #a78bfa
.demo { text-decoration: underline 3px #a78bfa; text-underline-offset: 4px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne retirez pas le soulignement des liens dans du texte courant. Pour beaucoup de personnes, c’est le principal signal indiquant qu’on peut cliquer.
text-underline-offsetéloigne le soulignement des lettres, donc il ne coupe pas les jambages de lettres comme g, j ou y.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.