A propriedade CSS text-decoration-thickness

Recomendação de curso:

Definição e uso

A propriedade text-decoration-thickness define a espessura da linha decorativa.

Veja também:Manual de referência do CSS:

Propriedade text-decorationTexto do CSS

Tutorial de CSS:

Exemplo

Defina diferentes espessuras de linha decorativa para os elementos <h1>, <h2>, <h3>, <h4>:
  text-decoration: underline;
  text-decoration-thickness: auto;
}
h2 {
  text-decoration: underline;
  text-decoration-thickness: 5px;
}
h3 {
  text-decoration: underline;
  text-decoration-thickness: 50%;
}
/* Uso de atributo abreviado */
h4 {
  text-decoration: underline solid red 50%;
}

Experimente você mesmo

Sintaxe do CSS

text-decoration-thickness: auto|from-font|length/percentage|initial|inherit;

Valor do atributo

Valor Descrição
auto O navegador escolhe a espessura da linha decorativa.
from-font Se o arquivo de fonte contiver informações sobre a espessura preferida, use esse valor. Caso contrário, ele se comportará como auto.
length/percentage Define a espessura como um valor de comprimento ou uma porcentagem.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Não suportado. Veja:Atributos relacionados a animação.
Versão: CSS4
Sintaxe do JavaScript: object.style.textDecorationThickness="5px"

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta plenamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
89.0 89.0 70.0 12.1 75.0