MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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:
Animatableas 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 Level 3
The definition of 'text-decoration' in that specification.
Candidate Recommendation 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.
Recommendation Sem mudanças significantes.
CSS Level 1
The definition of 'text-decoration' in that specification.
Recommendation Definição inicial.

Compatibilidade de Browser

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

Etiquetas do documento e colaboradores

 Colaboradores desta página: gabiduarte
 Última atualização por: gabiduarte,