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.

* Some parts of this feature may have varying levels of support.

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

Esse texto tem alguns elementos enfatizados nele.

, 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
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Sintaxe

css
/* 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 = 
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>  

 = 
  none                                                |
  [ underline || overline || line-through || blink ]  

 = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy    

 =

Exemplos

css
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;
}
html
Underlined Header


If you want to strike out text, use line-through.



  This text might blink for you - if you use Explorer, it will not.



and now an overlined header.



  This
  link will not be underlined, 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.



This text has both underline and overline.

Especificações

Specification
CSS Text Decoration Module Level 3
# text-decoration-property
Scalable Vector Graphics (SVG) 2
# TextDecorationProperties

Compatibilidade com navegadores

Veja também

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