👩🏽‍💻 CSS | Um pouco mais sobre text-decoration e text-underline

Fiquei 17 anos sem me atualizar sobre text-decoration. Em 2008, fiz um post sobre o uso dessa propriedade em links que é exatamente o que eu sabia até semana passada.

Para quem não está ligando o nome à pessoa, text-decoration é a propriedade dos sublinhados e textos riscados, usos mais recorrentes desse recurso.

Atualmente, temos as seguintes propriedades para personalizar o traço:

text-decoration-line

Esta é a principal propriedade porque é a que faz aparecer algum traço: underline, overline ou line-through. Você pode escolher um, dois ou os três. Esta propriedade pode ser agrupada em text-decoration, inclusive se escolher mais de um valor.

text-decoration-color

Gostei muito de descobrir isso porque sou da época em que a gente precisava usar borda para fazer sublinhado colorido. Caso a cor não seja especificada, o traço será da mesma cor do texto. Esta propriedade pode ser agrupada em text-decoration.

text-decoration-thickness

Se quiser mudar a espessura do traço, pode colocar um valor em pixels ou porcentagem. Porcentagem é melhor porque fica proporcional ao tamanho do texto, assim você não terá uma linha muito fina num texto grande ou vice-versa. De acordo com meus testes, o valor padrão (auto) é 10%. Esta propriedade pode ser agrupada em text-decoration.

text-decoration-style

solid é uma linha reta; double são duas linhas retas; dotted é uma linha pontilhada; dashed é uma linha tracejada; wavy é uma linha ondulada. Esta propriedade pode ser agrupada em text-decoration.

text-decoration-skip-ink

Skip ink significa, literalmente, pular tinta. O valor padrão é auto, mas se você escolher none, note que a linha vai seguir direta, sem pular o traço da fonte. Esta propriedade não pode ser agrupada em text-decoration.

Juntando tudo, pode ficar assim:

span {text-decoration: underline #f0f double auto;
text-decoration-skip-ink:none;}

O código acima tem um resultado como este numa fonte cursiva:

farofa - goiaba - jurubeba - pimenta - queijo

Farofa - Goiaba - Jurubeba - Pimenta - Queijo

Voltando text-decoration-skip-ink para auto, o resultado muda nas letras que passam da "linha" inferior:

farofa - goiaba - jurubeba - pimenta - queijo

Farofa - Goiaba - Jurubeba - Pimenta - Queijo

Para a maioria das fontes, eu prefiro none. Mas se for uma fonte mais artística, pode ser melhor o traço não ficar sobre o texto, como no exemplo acima.

Outro valor aceito para text-decoration-skip-ink é all, cuja aplicação só pode ser percebida em alguns alfabetos asiáticos.

E se eu usar text-decoration: underline overline rgba(200, 200, 255, 0.5) wavy 100%?

Acho que este traço foi longe demais!

Coloquei 50% de transparência na cor (0.5) porque o traço de cima fica SOBRE o texto do parágrafo anterior. Já o traço inferior fica SOB o parágrafo seguinte.

Atualização do dia 03/04/2025:

Como estou falando de text-decoration, preciso falar também sobre text-underline-offset e text-underline-position, duas propriedades que mudam o lugar do sublinhado.

text-underline-offset serve para definir uma distância entre o sublinhado e o texto, como no exemplo abaixo:

Este texto tem text-underline-offset: -2px.

text-underline-position também muda a distância entre o sublinhado e o texto, mas de outra forma. A posição padrão é auto, mas mudando para under, o traço aparecerá depois do texto, sem cortar curvas de letras, como nos exemplos acima.

A linha fica abaixo das curvinhas das letras.

Para o caso de texto vertical, também é possível usar left e right, sendo possível escolher dois valores, como nos exemplos abaixo:

text-underline-position: under left;
text-underline-position: right under;

Você encontra mais informações sobre text-decoration e text-underline nos sites MDN e W3Schools.

Confira também o texto sobre text-emphasis.

Até mais!