text-decoration-line

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propriété text-decoration-line définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).

Exemple interactif

La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

Syntaxe

css
/* Valeurs avec un mot-clé */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

/* Valeurs avec plusieurs mots-clés */
text-decoration-line: underline overline; /* On a deux décorations pour la ligne */
text-decoration-line: overline underline line-through; /* On a plusieurs décorations */

/* Valeurs globales */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

Valeurs

Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :

none

Aucune ligne ne décore le texte.

underline

Chaque ligne de texte est soulignée.

overline

Une ligne est dessinée au-dessus de chaque ligne de texte.

line-through

Une ligne est dessinée au milieu de chaque ligne de texte.

Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les animations CSS pour obtenir un effet similaire.

Définition formelle

Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

text-decoration-line = 
none |
[ underline || overline || line-through || blink ]

Exemples

HTML

html
<p>Voici un texte souligné avec une vaguelette rouge.</p>

CSS

css
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

Résultat

Spécifications

Specification
CSS Text Decoration Module Level 3
# text-decoration-line-property

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-line
blink
Deprecated
grammar-error
Experimental
line-through
none
overline
spelling-error
Experimental
underline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi

  • La propriété raccourcie text-decoration qui permet, entre autres, de paramétrer text-decoration-line.