Cómo controlar la apariencia de los subrayados

Los subrayados se pueden personalizar para mejorar el atractivo visual y la legibilidad. Para manipular la longitud y posición de una decoración de texto: subrayado, existe una técnica simple pero efectiva que implica el uso de degradados:

.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 posición:

• Para mover la línea, ajuste la propiedad de posición de fondo.
• Por ejemplo, posición de fondo: abajo a la izquierda; alinea la línea a la izquierda del texto.

Ajuste de longitud:

• Para controlar la longitud, ajuste la propiedad de tamaño de fondo.
• Por ejemplo, tamaño de fondo: 50% 1px; crea una línea más corta.

Personalización adicional:

• Cerca del texto: padding-bottom: 0; acerca la línea al texto.
• Lejos del texto: padding-bottom: 10px; aumenta la distancia entre la línea y el texto.
• Diferentes colores: Personaliza el color de la línea modificando la propiedad de la imagen de fondo, por ejemplo, imagen de fondo: gradiente lineal (rojo 0 0 );.