Docs executáveis de CSS: Sublinhado CSS

Q: Como sublinhar texto no CSS?

Use text-decoration: underline; no elemento. Para a aparência da linha, acrescente text-decoration-color, text-decoration-style, text-decoration-thickness e text-underline-offset.

Q: Como tirar o sublinhado de um link?

Defina text-decoration: none; no elemento a. Garanta que os links continuem se destacando de outro jeito (cor, mais um sublinhado no hover ou no foco), porque muitos leitores dependem do sublinhado para achar os links.

Q: Como mudar a cor do sublinhado?

Use text-decoration-color ou o shorthand: text-decoration: underline #f59e0b;. Sem isso, a linha usa a cor do texto.

Q: Como afastar o sublinhado do texto?

Use text-underline-offset, por exemplo text-underline-offset: 4px;. Valores maiores descem a linha para mais longe do texto.

Como sublinhar texto no CSS

text-decoration: underline desenha uma linha embaixo do texto. A linha usa a cor do texto, a menos que você dê outra a ela.

<!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>

A segunda linha usa o shorthand text-decoration para o tipo, o estilo e a cor da linha, e depois define a espessura e o offset com as próprias propriedades. A especificação também permite a espessura dentro do shorthand, mas o Safari descarta a declaração inteira quando você a inclui, então escreva text-decoration-thickness separado.

As propriedades text-decoration

Propriedade	Valores	Padrão
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (podem ser combinados)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Qualquer cor	`currentColor` (a cor do texto)
`text-decoration-thickness`	Um comprimento, uma porcentagem, `auto`, `from-font`	`auto`
`text-underline-offset`	Um comprimento, uma porcentagem, `auto`	`auto`

text-decoration é o shorthand das quatro primeiras, mas deixe a espessura fora dele: o Safari ignora uma declaração text-decoration que a contenha. text-underline-offset é separada e precisa ser escrita sozinha.

Estilos, cores e espessura

<!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>

Mover o sublinhado: text-underline-offset

Por padrão, a linha fica colada nas letras e desvia das partes que descem, como em g, p e y. text-underline-offset a empurra mais para baixo, o que costuma ficar mais limpo em títulos e links:

<!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>

Os vãos em volta dessas letras vêm de text-decoration-skip-ink: auto, que é o padrão. Defina none para uma linha contínua.

Tirar o sublinhado dos links

Os links são sublinhados pela folha de estilo do navegador. text-decoration: none remove o sublinhado. Como muitos leitores acham os links pelo sublinhado, traga-o de volta no hover e no foco do teclado, e dê ao link uma cor diferente da do texto:

<!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>

Barras de navegação e botões são um lugar justo para tirar o sublinhado, porque a posição deles já diz "link". Dentro de um parágrafo de texto, mantenha-o. Mais sobre os estados de link na página de hover.

Overline e line-through

text-decoration-line também desenha uma linha acima do texto ou atravessando-o, e aceita mais de um valor:

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

O texto riscado pelo CSS é só visual. Quando o texto é um conteúdo apagado (um preço alterado, um item removido), marque-o com <s> ou <del>, como mostra a página de sublinhado no HTML, para que o significado esteja na marcação e não só no estilo.

Erros comuns

Usar <u> para sublinhar por estilo. <u> serve para texto marcado como diferente, como erros de ortografia. Para um sublinhado estilizado, use CSS.
Sublinhar um texto que não é link. Os leitores vão tentar clicar. Use negrito, cor ou fundo para dar ênfase.
Tirar o sublinhado dos links no texto do corpo sem outra pista. Só a cor não basta para quem não enxerga a diferença.
Tentar remover o sublinhado do pai em um filho. Ele não pode ser desfeito por dentro; mude o pai ou transforme o filho em inline-block.
Esperar text-underline-offset dentro do shorthand. Ela é uma propriedade própria.
Colocar a espessura no shorthand. text-decoration: underline 2px funciona no Chrome e no Firefox, mas o Safari descarta a declaração inteira. Use text-decoration-thickness.

Perguntas frequentes

Como sublinhar texto no CSS?

Use text-decoration: underline; no elemento. Para a aparência da linha, acrescente text-decoration-color, text-decoration-style, text-decoration-thickness e text-underline-offset.

Como tirar o sublinhado de um link?

Defina text-decoration: none; no elemento a. Garanta que os links continuem se destacando de outro jeito (cor, mais um sublinhado no hover ou no foco), porque muitos leitores dependem do sublinhado para achar os links.

Como mudar a cor do sublinhado?

Use text-decoration-color ou o shorthand: text-decoration: underline #f59e0b;. Sem isso, a linha usa a cor do texto.

Como afastar o sublinhado do texto?

Use text-underline-offset, por exemplo text-underline-offset: 4px;. Valores maiores descem a linha para mais longe do texto.

Por que não consigo tirar o sublinhado de um elemento filho?

Um sublinhado desenhado pelo pai é pintado por cima dos filhos e não pode ser removido de dentro deles. Remova-o no elemento que o define ou transforme o filho em display: inline-block, que a decoração do pai não alcança.

Conceitos relacionados