text-decoration
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 value | as each of the properties of the shorthand:
|
---|---|
Aplica-se a | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | não |
Computed value | as each of the properties of the shorthand:
|
Animation type | as 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
, text-decoration-color
, e text-decoration-style
Sintaxe Formal
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
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-property |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- O atributo
list-style
controla a aparência dos itens em listas<ol>
e<ul>
no HTML.