Linha de decoração de texto - CSS-Tricks

Anonim

A text-decoration-linepropriedade decora o texto com um sublinhado, sobrelinhado, uma linha ou uma combinação dessas linhas.

p ( text-decoration-line: underline; )

Valores

  • none: nenhuma linha é adicionada e quaisquer linhas existentes são removidas - por exemplo, noneremove o sublinhado padrão nos links.
  • underline: adiciona um sublinhado de 1 px abaixo do texto.
  • overline: adiciona uma linha sobreposta de 1px acima do texto.
  • line-through: adiciona uma linha de 1px ao texto.
  • inherit: herda a decoração do pai.

O valor blinkestá na especificação W3C, mas está obsoleto e não funcionará em nenhum navegador atual. Quando funcionava, fazia com que o texto parecesse “piscar” alternando-o rapidamente entre 0% e 100% de opacidade.

Combinando Valores

Você pode combinar as underline, overlineou line-throughvalores em uma lista separada por espaço para adicionar várias linhas de decoração:

p ( text-decoration-line: overline underline line-through; )

Uso

A text-decoration-linepropriedade é praticamente idêntica à text-decorationpropriedade original . Se tudo o que você deseja fazer é adicionar uma linha ou linhas ao seu texto, text-decorationé uma escolha melhor porque é compatível com todos os navegadores, mesmo os mais antigos. Geralmente, usar uma text-decoration-linedeclaração só faz sentido quando você está escrevendo uma regra de estilo extenso que inclui text-decoration-styleou uma text-decoration-colordeclaração. Se quiser usar todos os três juntos, você pode usar a text-decorationpropriedade abreviada .

Forma abreviada

text-decoration-linepode ser usado em combinação com text-decoration-stylee text-decoration-colorna text-decorationpropriedade abreviada de CSS3 (atualmente, apenas o Firefox oferece suporte completo):

.underlined ( text-decoration: underline dotted red; )

Demo

Esta demonstração funcionará no Safari, Firefox e Chrome com recursos experimentais da plataforma web ativados. O blinkvalor não está incluso.

Veja o Pen text-decoration-line por CSS-Tricks (@ css-tricks) em CodePen.

Relacionado

  • decoração de texto
  • estilo de decoração de texto
  • texto-decoração-cor
  • text-decoration-skip

Mais Informações

  • text-decoration-line na especificação W3C
  • text-decoration-line em MDN

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
31 * † 7,1 * 6 ‡ Nenhum Nenhum Nenhum 8 *

* com -webkitprefixo
† com sinalizador experimental de recursos da plataforma da Web habilitado
‡ 6 - 35 com -mozprefixo, sem prefixo a partir de 36.