text-decoration

Resumo

A propriedade text-decoration do CSS é usada para definir a formatação de  underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.

A propriedade text-decoration desenha em elementos descendentes. Isso significa que não é possivel desabilitar em um descendente uma decoração que foi especificada em um de seus antecessores. Por exemplo, no markup <p>Esse texto tem <em>alguns elementos enfatizados</em> nele.</p>, a regra de estilo p { text-decoration: underline; } faria com que todo o parágrafo fosse sublinhado. A regra em { text-decoration: none; } não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regra em { text-decoration: overline; } iria decorar o trecho "alguns elementos enfatizados".

Nota: CSS 3 transformou a propriedade Text-Decoration para forma reduzida, usando as seguintes propriedades: text-decoration-color, text-decoration-line, e text-decoration-style. Como em outras propriedades reduzidas, isso significa que ele reseta o valor de cada uma para padrão se não for explicitamente especificada na forma reduzida.

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Midiavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Sintaxe

/* Valores Chave */
text-decoration: none;                 /* Sem decoração */
text-decoration: underline red;        /* Sublinhado vermelho */
text-decoration: underline wavy red;   /* Sublinhado ondulado vermelho */

/* Valores Globais */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Valores

A propriedade text-decoration é escrita de forma reduzida e pode usar os valores de cada uma das propriedades: text-decoration-line, text-decoration-color, e text-decoration-style

Sintaxe Formal

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Exemplos

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

Especificações

Especificação Status Comentários
CSS Text Decoration Module Level 3
The definition of 'text-decoration' in that specification.		 Candidata a Recomendação Transformado em uma propriedade reduzida. Adicionado suporte para o valor text-decoration-style.
CSS Level 2 (Revision 1)
The definition of 'text-decoration' in that specification.		 Recomendação Sem mudanças significantes.
CSS Level 1
The definition of 'text-decoration' in that specification.		 Recomendação Definição inicial.

Compatibilidade de Browser

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Suporte básico 1.0 (1.7 or earlier) 1.0 3.0 3.5 1.0
Valor blink 1.0 (1.7 or earlier)
23.0 (23.0)[1]		 (Yes)[1] (Yes)[1] 4.0
15.0[1]		 (Yes)[1]
Propriedade reduzida 6.0 (6.0)[3]
36.0 (36.0)		 Não suportado Não suportado Não suportado 7.1[2]
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Suporte básico 1.0 (1.0) (Yes) (Yes) (Yes) (Yes)
Valor blink 1.0 (1.7 or earlier)
23.0 (23.0)[1]		 (Yes)[1] (Yes)[1] 4.0[1] (Yes)[1]
Propriedade reduzida 6.0 (6.0)[3]
36.0 (36.0)		 ? ? ? 8[1]

[1] O valor blink não tem nenhum efeito.

[2] Safari não suporta text-decoration-style.

[3] Essa versão do Gecko tem implementação parcial.

Veja também