Docs CSS exécutables : Souligner en CSS

Q: Comment souligner du texte en CSS ?

Utilisez text-decoration: underline; sur l'élément. Pour l'apparence de la ligne, ajoutez text-decoration-color, text-decoration-style, text-decoration-thickness et text-underline-offset.

Q: Comment enlever le soulignement d'un lien ?

Définissez text-decoration: none; sur l'élément a. Veillez à ce que les liens se distinguent encore autrement (une couleur plus un soulignement au survol ou au focus), car beaucoup de lecteurs repèrent les liens grâce au soulignement.

Q: Comment changer la couleur du soulignement ?

Utilisez text-decoration-color, ou le raccourci : text-decoration: underline #f59e0b;. Sans cela, la ligne prend la couleur du texte.

Q: Comment ajouter de l'espace entre le texte et le soulignement ?

Utilisez text-underline-offset, par exemple text-underline-offset: 4px;. Plus la valeur est grande, plus la ligne descend sous le texte.

Comment souligner du texte en CSS

text-decoration: underline trace une ligne sous le texte. La ligne prend la couleur du texte, sauf si vous lui en donnez une.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

La deuxième ligne utilise le raccourci text-decoration pour le type de ligne, le style et la couleur, puis règle l'épaisseur et le décalage avec leurs propres propriétés. La spécification autorise aussi l'épaisseur dans le raccourci, mais Safari ignore toute la déclaration quand vous l'y mettez : écrivez donc text-decoration-thickness séparément.

Les propriétés text-decoration

Propriété	Valeurs	Par défaut
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (combinables)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	N'importe quelle couleur	`currentColor` (la couleur du texte)
`text-decoration-thickness`	Une longueur, un pourcentage, `auto`, `from-font`	`auto`
`text-underline-offset`	Une longueur, un pourcentage, `auto`	`auto`

text-decoration est le raccourci des quatre premières, mais laissez l'épaisseur en dehors : Safari ignore une déclaration text-decoration qui en contient une. text-underline-offset est à part et doit être écrite seule.

Styles, couleurs et épaisseur

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Déplacer le soulignement : text-underline-offset

Par défaut, la ligne est proche des lettres et contourne les jambages comme g, p et y. text-underline-offset la descend davantage, ce qui est souvent plus lisible sur les titres et les liens :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Les interruptions autour des jambages viennent de text-decoration-skip-ink: auto, activé par défaut. Réglez-le sur none pour une ligne continue.

Retirer le soulignement des liens

Les liens sont soulignés par la feuille de style du navigateur. text-decoration: none retire ce soulignement. Comme beaucoup de lecteurs repèrent les liens à leur soulignement, remettez-le au survol et au focus clavier, et donnez au lien une couleur différente de celle du texte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Les barres de navigation et les boutons sont des endroits légitimes pour retirer le soulignement, car leur position indique déjà « lien ». Dans un paragraphe de texte, gardez-le. Les états des liens sont détaillés sur la page hover.

Surlignement et texte barré

text-decoration-line trace aussi une ligne au-dessus du texte ou à travers, et accepte plusieurs valeurs :

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

Un texte barré en CSS n'est que visuel. Quand il s'agit de contenu supprimé (un prix modifié, un article retiré), balisez-le avec <s> ou <del>, comme le montre la page souligner en HTML, pour que le sens soit dans le balisage et pas seulement dans le style.

Erreurs courantes

Utiliser <u> pour souligner par style. <u> sert au texte marqué comme différent, par exemple les fautes d'orthographe. Pour un soulignement décoratif, utilisez le CSS.
Souligner un texte qui n'est pas un lien. Les lecteurs essaieront de cliquer dessus. Pour insister, utilisez plutôt le gras, la couleur ou un fond.
Retirer le soulignement des liens dans le texte courant sans autre repère. La couleur seule ne suffit pas aux lecteurs qui ne voient pas la différence.
Essayer de retirer le soulignement d'un parent depuis un enfant. Impossible depuis l'intérieur ; modifiez le parent ou passez l'enfant en inline-block.
Chercher text-underline-offset dans le raccourci. C'est une propriété à part.
Mettre l'épaisseur dans le raccourci. text-decoration: underline 2px fonctionne dans Chrome et Firefox, mais Safari ignore toute la déclaration. Utilisez text-decoration-thickness.

Questions fréquentes

Comment souligner du texte en CSS ?

Utilisez text-decoration: underline; sur l'élément. Pour l'apparence de la ligne, ajoutez text-decoration-color, text-decoration-style, text-decoration-thickness et text-underline-offset.

Comment enlever le soulignement d'un lien ?

Définissez text-decoration: none; sur l'élément a. Veillez à ce que les liens se distinguent encore autrement (une couleur plus un soulignement au survol ou au focus), car beaucoup de lecteurs repèrent les liens grâce au soulignement.

Comment changer la couleur du soulignement ?

Utilisez text-decoration-color, ou le raccourci : text-decoration: underline #f59e0b;. Sans cela, la ligne prend la couleur du texte.

Comment ajouter de l'espace entre le texte et le soulignement ?

Utilisez text-underline-offset, par exemple text-underline-offset: 4px;. Plus la valeur est grande, plus la ligne descend sous le texte.

Pourquoi ne puis-je pas retirer le soulignement d'un élément enfant ?

Un soulignement dessiné par un parent est peint par-dessus ses enfants et ne peut pas être retiré depuis l'intérieur. Retirez-le sur l'élément qui le définit, ou passez l'enfant en display: inline-block, que la décoration du parent n'atteint pas.

Concepts liés