Propriedade CSS text-decoration-line
Use a propriedade CSS text-decoration-line para definir o tipo de linha para decoração de texto. Veja os valores e experimente exemplos práticos.
A propriedade text-decoration-line define o tipo de linha utilizada para decoração de texto — underline, overline, line-through, ou qualquer combinação dessas opções.
É uma das quatro propriedades longhands que compõem o shorthand text-decoration, sendo as outras text-decoration-color, text-decoration-style e text-decoration-thickness. Use text-decoration-line de forma isolada quando precisar alterar apenas quais linhas aparecem, sem modificar cor, estilo e espessura.
Esta página aborda os valores aceitos pela propriedade, como combinar várias linhas ao mesmo tempo, o relacionamento com o shorthand e alguns cuidados práticos.
A propriedade text-decoration-line é totalmente suportada em todos os navegadores modernos sem prefixos de fornecedor. É uma das propriedades CSS3.
Por que usar text-decoration-line
Um motivo comum para recorrer ao longhand é adicionar ou remover uma única linha sem interferir no restante da decoração. Por exemplo, links são sublinhados por padrão; definir text-decoration-line: none remove esse sublinhado e ainda permite definir uma cor de sublinhado personalizada posteriormente através do shorthand. A propriedade também aceita múltiplas palavras-chave, permitindo colocar um sublinhado e um overline no mesmo texto em uma única declaração.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.textDecorationLine = "overline underline"; |
Sintaxe
Sintaxe CSS text-decoration-line
text-decoration-line: none | [ underline || overline || line-through ] | initial | inherit;A palavra-chave none aparece sozinha, mas underline, overline e line-through podem ser combinadas em uma única declaração, separadas por espaços, e a ordem não importa:
/* a single line */
text-decoration-line: underline;
/* two lines at once */
text-decoration-line: underline overline;
/* all three */
text-decoration-line: underline overline line-through;Exemplo da propriedade text-decoration-line:
Exemplo de código CSS text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Resultado
Exemplo da propriedade text-decoration-line com o valor "underline":
Exemplo CSS text-decoration-line com valor underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemplo da propriedade text-decoration-line com o valor "line-through":
Exemplo CSS text-decoration-line com valor line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemplo da propriedade text-decoration-line com todos os valores:
Exemplo CSS text-decoration-line com todos os valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Combinando text-decoration-line com o shorthand
Como text-decoration-line controla apenas as linhas, normalmente ela é utilizada em conjunto com os outros longhands — ou simplesmente usa-se o shorthand text-decoration, que define todos de uma vez. Estas duas regras produzem o mesmo resultado:
/* longhands */
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
/* shorthand equivalent */
p {
text-decoration: underline red wavy;
}Recorrer ao longhand vale a pena quando se deseja substituir apenas um aspecto sem reescrever toda a decoração — por exemplo, alterar somente o tipo de linha no :hover mantendo uma cor e estilo herdados.
Nota sobre acessibilidade
text-decoration-line: line-through é puramente visual: tecnologias assistivas não anunciam que o texto está tachado. Para transmitir "este conteúdo foi removido" ou "excluído" a usuários de leitores de tela, marque o conteúdo com o elemento semântico <del> ou <s>, em vez de depender apenas do CSS.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Nenhuma linha é especificada. | Experimente » |
| underline | Especifica uma linha abaixo do texto. | Experimente » |
| overline | Especifica uma linha acima do texto. | Experimente » |
| line-through | Especifica uma linha através do texto. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
A propriedade text-decoration-line suportava anteriormente o valor blink, que fazia o texto piscar. Ele está agora obsoleto e a maioria dos navegadores o ignora, portanto não o utilize em código novo.
Propriedades relacionadas
- text-decoration — o shorthand que define linha, cor, estilo e espessura ao mesmo tempo.
- text-decoration-color — define a cor da linha de decoração.
- text-decoration-style — define a linha como
solid,double,dotted,dashedouwavy.