text-decoration-style

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 CSS text-decoration-style CSS define o estilo das linhas especificadas por text-decoration-line. O modelo aplica-se a todas as linhas, não há nenhuma forma de definir estilos diferentes para cada uma das linhas utilizando text-decoration-line.

Se a decoração especificada tem um significado semântico específico, como uma linha de line-through o que significa que um texto tenha sido excluído, autores são encorajados a denotar este significado usando uma tag HTML, como <del> ou <s>. Como os navegadores podem ser deficientes em alguns casos, o significado semântico não vai desaparecer em tal situação.

Initial value	`solid`
Aplica-se a	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	não
Computed value	as specified
Animation type	discrete

Syntax

css

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Valores

solid double dotted dashed wavy

É uma das seguintes palavras-chave:

Keyword	Description	Comment
`solid`	Draws a single line
`double`	Draws a double line
`dotted`	Draws a dotted line
`dashed`	Draws a dashed line
`wavy`	Draws a wavy line
`-moz-none` Non-standard	Do not draw a line	Do not use : use `text-decoration-line: none` instead

inherit

É uma palavra-chave indicando a reutilizar o valor calculado sobre o elemento pai.

Syntax Formal

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

Exemplo

css

.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}

css

.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

html

<p class="example">This is how it looks.</p>

Especificações

Specification
CSS Text Decoration Module Level 3 # text-decoration-style-property

Browser compatíveis

BCD tables only load in the browser