Propriedade CSS text-decoration
Use a propriedade abreviada CSS text-decoration para especificar o tipo de linha, estilo e cor da decoração de texto. Veja os valores e exemplos práticos.
A propriedade CSS text-decoration adiciona linhas decorativas ao texto — mais comumente o sublinhado abaixo de um link, uma linha sobre texto excluído ou uma linha acima para ênfase. É a propriedade que você usa quando deseja adicionar (ou, com igual frequência, remover) essas linhas.
Esta página aborda a sintaxe abreviada, todos os valores aceitos, como ela interage com suas propriedades individuais e os casos práticos em que você realmente a utiliza (como estilizar links).
O que text-decoration faz
No CSS3, text-decoration é uma propriedade abreviada que define três propriedades individuais de uma só vez:
- text-decoration-line — quais linhas aparecem (
underline,overline,line-through, ou várias ao mesmo tempo). - text-decoration-color — a cor da linha (padrão: cor do texto do elemento,
currentColor). - text-decoration-style — o estilo da linha (
solid,double,dotted,dashed,wavy).
Por ser uma propriedade abreviada, qualquer propriedade individual omitida é redefinida para seu valor inicial. A própria linha, text-decoration-line, tem como padrão none — por isso text-decoration: none é a forma canônica de remover o sublinhado de um link.
Na especificação CSS1 original, text-decoration não era uma propriedade abreviada. Era uma propriedade única que aceitava apenas estas palavras-chave:
noneunderlineoverlineline-throughblink(agora obsoleto e ignorado pelos navegadores modernos)
A propriedade abreviada CSS3 é um superconjunto dessa lista, portanto declarações antigas com uma única palavra-chave como text-decoration: underline ainda funcionam exatamente como antes.
Quando usar
- Remover sublinhados de links:
a { text-decoration: none; }— e depois adicione seu próprio estilo para o hover. - Marcar edições:
line-throughpara texto removido,underlinepara texto inserido. - Sublinhados personalizados: combine cor e estilos
wavy/dottedpara sublinhados no estilo de verificação ortográfica ou decorações de link com identidade visual própria.
Dica de acessibilidade: Sublinhados são a indicação convencional de que um texto é um link. Se você os remover, torne os links distinguíveis de alguma outra forma (uma diferença de cor clara mais um sublinhado no hover/foco), para que o link seja óbvio para todos os leitores.
| Propriedade | Detalhe |
|---|---|
| Valor Inicial | none currentColor solid (o valor inicial de cada propriedade individual) |
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS1, CSS3 |
| Sintaxe DOM | object.style.textDecoration = "underline dotted red"; |
Sintaxe
text-decoration: <line> <color> <style> | initial | inherit;<line>é uma ou mais palavras-chave detext-decoration-line(none,underline,overline,line-through).<color>é qualquer valor de cor CSS.<style>é uma palavra-chave detext-decoration-style(solid,double,dotted,dashed,wavy).
A ordem das três partes não importa, e você pode omitir qualquer uma delas. Múltiplos valores de linha podem ser combinados — por exemplo, underline overline desenha ambas ao mesmo tempo:
/* underline, in red, with a wavy style */
text-decoration: underline wavy red;
/* two lines at once; color and style fall back to defaults */
text-decoration: underline overline;Exemplo da propriedade text-decoration:
Exemplo da propriedade CSS text-decoration com os valores overline, line-through, underline e overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Resultado
Exemplo da propriedade text-decoration com uma cor especificada:
Exemplo da propriedade CSS text-decoration com a propriedade text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>O prefixo -webkit- é omitido aqui, pois os navegadores modernos suportam completamente a propriedade padrão.
Exemplo da propriedade text-decoration com um estilo especificado:
Exemplo da propriedade CSS text-decoration com as propriedades text-decoration-line e text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| text-decoration-line | Especifica o tipo de decoração de texto. |
| text-decoration-color | Especifica a cor da decoração de texto. |
| text-decoration-style | Especifica o estilo da decoração de texto. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- text-decoration-line — define a(s) linha(s) individualmente.
- text-decoration-color — define a cor da decoração independentemente da cor do texto.
- text-decoration-style — escolha entre linhas solid, double, dotted, dashed ou wavy.