Como controlar a aparência dos sublinhados

Os sublinhados podem ser personalizados para melhorar o apelo visual e a legibilidade. Para manipular o comprimento e a posição de uma decoração de texto: sublinhado, existe uma técnica simples, mas eficaz, que envolve o uso de gradientes:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

Ajuste de posição:

• Para mover a linha, ajuste a propriedade background-position.
• Por exemplo, background-position: canto inferior esquerdo; alinha a linha à esquerda do texto.

Ajuste de comprimento:

• Para controlar o comprimento, ajuste a propriedade do tamanho do plano de fundo.
• Por exemplo, tamanho de fundo: 50% 1px; cria uma linha mais curta.

Personalização adicional:

• Perto do texto: padding-bottom: 0; aproxima a linha do texto.
• Longe do texto: padding-bottom: 10px; aumenta a distância entre a linha e o texto.
• Cores Diferentes: Personalize a cor da linha modificando a propriedade background-image, por exemplo, background-image: linear-gradient(red 0 0 );.