Una de las ventajas de crear mi sitio web personal desde cero en lugar de usar un tema listo es que empiezo con la configuración predeterminada del navegador y gradualmente agrego mis propios colores. Intento evitar que el sitio se hinche, pero la personalización es algo importante. Necesitamos encontrar un compromiso entre las páginas espartanas de Hacker News y Craigslist por un lado y la congestión del viejo MySpace por el otro.

De alguna manera me encontré con un sitio web con subrayados animados y elegantes para enlaces, y quería darme cuenta del efecto. Pero es importante para mí usar CSS puro, porque en aras de cosas tan frívolas, no vale la pena agregar JavaScript, lo que puede causar problemas con el rendimiento o la usabilidad de la interfaz (ver secuestro de la barra de desplazamiento ).

Así es como se ve el efecto ahora:

Implementación

Dibujar líneas debajo del texto es un tema sorprendentemente complejo . Todo depende de qué tan lejos esté listo para desviarse del estándar y qué detalles le preocupan (por ejemplo, pasar por elementos remotos de letras ).

Exploré dos enfoques . Ambos, en esencia, eliminan la decoración de texto estándar y agregan un borde simulado usando pseudoelementos . Este borde es animado por transiciones CSS . Desafortunadamente, estas soluciones tienen un inconveniente: no funcionan normalmente si el enlace cubre más de una línea. El subrayado aparece solo en la primera línea.


Al final, encontré el CodePen de Shaw , desprovisto de este defecto, y cambié el efecto a mi gusto.


Aquí está el código relevante. Puedes jugar con él en repl.it.

a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; } 

Consideremos esta solución con más detalle.

Primero, apague la text-decoration estándar.

Tendremos que usar una imagen de fondo porque puede cubrir varias líneas. Aunque puede tomar una imagen real, es solo una línea, por lo que utilizamos un degradado lineal que generará una imagen para nosotros. Por lo general, se usa para crear un degradado entre dos colores diferentes, pero necesitamos que el subrayado sea del mismo color que el enlace, por lo que usamos currentColor tanto para el comienzo como para el final del degradado. currentColor le dice al navegador que use el color del elemento de la propiedad color .

Use la posición de fondo para colocar la imagen en la esquina inferior izquierda. Un valor de 0% corresponde a una posición horizontal, y 100% corresponde a una posición vertical.

Desactive la repetición de fondo para evitar múltiples instancias de la imagen.

Usando el tamaño de fondo, especifique el ancho cero y la altura de dos píxeles. Ancho cero significa que el subrayado aparece solo al pasar el ratón; de lo contrario, la imagen no es visible.

Establezca la transición para que se ajuste al fondo, de modo que cualquier cambio de propiedad tome 0.3 segundos.

Cuando pasa el cursor sobre un enlace, cambiamos el ancho de la imagen en un 100% , creando un subrayado completo, y la transition proporciona animación.

Eso es todo! Estoy muy satisfecho con la brevedad del código. Si desea agregar algo similar a su sitio, siéntase libre de tomar esta implementación o ver algunos otros efectos de subrayado animados .