Propriedade text-decoration-style
A propriedade text-decoration-style altera
o tipo de linha no texto: linha sólida, dupla,
pontilhada, tracejada, linha ondulada.
A propriedade deve ser usada em conjunto com as
propriedades text-decoration-line
e text-decoration-color.
Essas propriedades estendem a ação da propriedade
text-decoration,
sendo análogos mais avançados.
Sintaxe
seletor {
text-decoration-line: solid | double | dotted | dashed | wavy;
}
Valores
| Valor | Descrição |
|---|---|
solid |
Linha sólida. |
double |
Linha dupla. |
dotted |
Linha pontilhada. |
dashed |
Linha tracejada. |
wavy |
Linha ondulada. |
Valor padrão: solid.
Exemplo . Valor wavy
Agora o texto ficará sublinhado com uma linha ondulada vermelha:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-line: underline;
}
:
Exemplo . Valor dotted
Agora o texto ficará sublinhado com uma linha pontilhada vermelha:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: dotted;
text-decoration-color: red;
text-decoration-line: underline;
}
:
Exemplo . Valor double
Agora o texto ficará tachado com uma linha dupla vermelha:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: double;
text-decoration-color: red;
text-decoration-line: line-through;
}
:
