Personalizando cores de sublinhado de texto com CSS

Em web design, adicionar um sublinhado ao texto é uma prática comum para enfatizar ou destacar informações. Porém, e se você quiser adicionar um toque único alterando a cor do sublinhado? É possível?

Sim, é possível alterar a cor da linha abaixo do texto usando CSS. Aqui estão dois métodos que você pode usar:

Método 1: usando text-decoration-color

A abordagem mais direta é usar a propriedade text-decoration-color. Esta propriedade especifica a cor do sublinhado, permitindo personalizá-lo independentemente da cor do texto.

Por exemplo, para criar texto vermelho com sublinhado azul, você usaria o seguinte CSS:

text-decoration-color: blue;

Método 2: Usando border-bottom

Um método alternativo é usar o propriedade de borda inferior. Esta propriedade cria uma borda na parte inferior do texto, que pode simular um sublinhado. Ao definir a propriedade border-bottom-color, você pode especificar a cor do sublinhado.

Por exemplo, veja como você obteria o mesmo efeito do Método 1 usando border-bottom:

border-bottom: 1px solid blue;
text-decoration: none;

Nota: A propriedade text-decoration-color é suportada por navegadores modernos. Se precisar de suporte a navegadores mais antigos, você pode usar o método border-bottom para compatibilidade.