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".

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;
}

<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>

Especificações

Compatibilidade de Browser

[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

• O atributo list-style controla a aparência dos itens em listas <ol> e <ul> no HTML.