Decoração de texto - CSS-Tricks

Anonim

A text-decorationpropriedade adiciona um sublinhado, um sobrelinhamento, uma linha ou uma combinação de linhas ao texto selecionado.

h3 ( text-decoration: underline; )

Valores

  • none: nenhuma linha é desenhada e qualquer decoração existente é removida.
  • underline: desenha uma linha de 1px no texto em sua linha de base.
  • line-through: desenha uma linha de 1px no texto em seu ponto “meio”.
  • overline: desenha uma linha de 1px no texto, diretamente acima de seu ponto “superior”.
  • inherit: herda a decoração do pai.

O blinkvalor está 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.

Demo

Consulte Pen CSS-Tricks: Text Decoration por CSS-Tricks (@ css-tricks) no CodePen.

Notas de Uso

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: overline underline line-through; )

Por padrão, a linha ou linhas herdam a cor do texto conforme definido por sua colorpropriedade. Você pode alterar isso em navegadores que suportam a text-decoration-colorpropriedade ou a propriedade abreviada de três valores.

text-decoration como uma propriedade abreviada

text-decorationpode ser usado em combinação com text-decoration-stylee text-decoration-colorcomo uma propriedade abreviada:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Atualmente, apenas o Firefox oferece suporte a este sem prefixo. O Safari oferece suporte com o -webkitprefixo. O Chrome também precisa do -webkitprefixo e dos recursos experimentais da plataforma da web ativados nas sinalizações do Chrome.

Relacionado

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Mais Informações

  • text-decoration como uma propriedade abreviada na especificação W3C CSS Text Decoration Module Nível 3 CR
  • decoração de texto em MDN

Suporte para navegador

Todos os navegadores suportam a propriedade CSS2.1 “longhand” text-decoration. A propriedade estenográfica e as sub-unidades text-decoration-color, text-decoration-linee text-decoration-stylesão suportados unprefixed em Fogo, e com o -webkitprefixo no Safari. O Chrome também reconhecerá esses valores com o -webkitprefixo e a sinalização Experimental Web Platforms ativados.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
91 87 Não 88 TP

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

* text-decorationTotalmente suportado, subpropriedades suportadas com -webkitprefixo.
† as subpropriedades também requerem a ativação da sinalização de recursos experimentais da plataforma da web.
‡ CSS2.1 text-decorationapenas; subpropriedades não suportadas.