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 (en-US), text-decoration-line (en-US), 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
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

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 (en-US), text-decoration-color (en-US), e text-decoration-style

Sintaxe Formal

<'text-decoration-line'> (en-US) || (en-US) <'text-decoration-style'> || (en-US) <'text-decoration-color'> (en-US) || (en-US) <'text-decoration-thickness'> (en-US)

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! (en-US)

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