1. Web
  2. CSS
  3. text-decoration-line

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

text-decoration-line

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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

text-decoration-line: none;

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

text-decoration-line: underline overline;

text-decoration-line: underline line-through;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

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 ]  |
  spelling-error                                      |
  grammar-error

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

Voir aussi

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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content