Propriedade text-decoration: Sublinhado, riscado e mais

Além de controlar a aparência básica do texto (fonte, tamanho, peso, estilo e alinhamento), o CSS também nos permite adicionar "decorações" visuais. A propriedade text-decoration é responsável por aplicar linhas decorativas ao texto, como sublinhado, linha sobreposta ou riscado.

A text-decoration é frequentemente usada para indicar links (sublinhado) ou para mostrar texto que foi removido ou corrigido (riscado).

Pense na text-decoration como as ferramentas que você usa para marcar um texto em um livro: você pode sublinhar algo importante, riscar algo que está errado, ou até mesmo fazer uma linha sobre o texto para chamar atenção.

Como usar a propriedade text-decoration

A sintaxe é simples: você seleciona o elemento e atribui um valor à propriedade text-decoration.

Sintaxe:

seletor {
  text-decoration: valor;
}

Valores possíveis:

A propriedade text-decoration é uma shorthand (atalho) para várias sub-propriedades que controlam o tipo de linha, a cor da linha, o estilo da linha e a espessura da linha.

1. Tipos de Linha (text-decoration-line)

Estes são os valores mais comuns e podem ser usados diretamente na shorthand text-decoration.

• none (padrão): Remove qualquer decoração de texto, incluindo o sublinhado padrão dos links.
  • Uso: Muito comum para remover o sublinhado de links (a { text-decoration: none; }).
• underline: Adiciona uma linha abaixo do texto.
  • Uso: O mais comum para links.
• overline: Adiciona uma linha acima do texto.
  • Uso: Menos comum, para efeitos visuais específicos.
• line-through: Adiciona uma linha através do texto (riscado).
  • Uso: Para indicar texto removido, preços antigos, ou itens riscados em uma lista.

Você pode combinar underline, overline e line-through separando-os por espaço (ex: text-decoration: underline overline;).

2. Cor da Linha (text-decoration-color)

Define a cor da linha decorativa. Por padrão, a cor da linha é a mesma que a color do texto.

• Sintaxe: text-decoration-color: valor-da-cor;
• Exemplo: text-decoration-color: red;

3. Estilo da Linha (text-decoration-style)

Define o estilo da linha decorativa.

• solid (padrão): Linha contínua.

• double: Linha dupla.

• dotted: Linha pontilhada.

• dashed: Linha tracejada.

• wavy: Linha ondulada.

• Exemplo: text-decoration-style: wavy;

4. Espessura da Linha (text-decoration-thickness)

Define a espessura da linha decorativa.

• auto (padrão): O navegador escolhe a espessura.
• from-font: A espessura é determinada pela fonte.
• Valores de comprimento (px, em, rem, etc.): text-decoration-thickness: 2px;
• Porcentagens: text-decoration-thickness: 10%; (relativo ao font-size).

Usando a Shorthand text-decoration

Você pode usar a shorthand text-decoration para definir todas essas propriedades em uma única linha. A ordem dos valores não é estritamente fixa, mas uma ordem comum é: line color style thickness.

Exemplo de Shorthand:

seletor {
  text-decoration: underline red wavy 2px;
}

Exemplo Prático:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Text Decoration</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      font-size: 1.1rem;
    }

    p {
      margin-bottom: 10px;
    }

    a {
      color: blue; /* Cor padrão do link */
      /* text-decoration: underline; (padrão do navegador) */
    }

    .no-underline {
      text-decoration: none; /* Remove o sublinhado */
    }

    .underline-text {
      text-decoration: underline;
    }

    .overline-text {
      text-decoration: overline;
    }

    .line-through-text {
      text-decoration: line-through;
    }

    .custom-decoration {
      text-decoration: underline wavy red 2px; /* Shorthand */
      /* Equivalente a:
         text-decoration-line: underline;
         text-decoration-color: red;
         text-decoration-style: wavy;
         text-decoration-thickness: 2px;
      */
      color: green; /* A cor da linha é independente da cor do texto aqui */
    }

    .double-underline {
      text-decoration-line: underline;
      text-decoration-style: double;
      text-decoration-color: purple;
    }

    .dashed-line-through {
      text-decoration: line-through dashed orange; /* Shorthand */
    }
  </style>
</head>
<body>
  <p>Este é um parágrafo normal.</p>
  <p><a href="#" class="no-underline">Este é um link sem sublinhado.</a></p>
  <p class="underline-text">Este texto está sublinhado.</p>
  <p class="overline-text">Este texto tem uma linha acima.</p>
  <p class="line-through-text">Este texto está riscado.</p>
  <p class="custom-decoration">Este texto tem uma decoração personalizada.</p>
  <p class="double-underline">Este texto tem um sublinhado duplo roxo.</p>
  <p class="dashed-line-through">Preço antigo: <span style="font-size: 1.2em;">R$ 99,90</span> Preço novo: R$ 49,90</p>
</body>
</html>

Resultado: Observe as diferentes decorações aplicadas ao texto.

Boas Práticas:

• Links: É uma convenção forte sublinhar links para indicar que são clicáveis. Se você remover o sublinhado (text-decoration: none;), certifique-se de que há outra indicação visual clara de que é um link (ex: mudança de cor, negrito, ícone, etc.) para acessibilidade.
• Ênfase: Use line-through para indicar texto removido ou preços antigos. overline é menos comum, mas pode ser usado para efeitos específicos.
• Moderação: Use decorações personalizadas (cores, estilos, espessuras) com moderação para não sobrecarregar o design e manter a legibilidade.
• Acessibilidade: Garanta que as decorações não dificultem a leitura, especialmente para usuários com deficiências visuais.

A propriedade text-decoration oferece um controle refinado sobre as linhas decorativas do seu texto, permitindo que você adicione significado e estilo visual de forma eficaz.