L'un des avantages de créer mon site Web à partir de zéro au lieu d'utiliser un thème prêt à l'emploi est que je commence avec les paramètres de navigateur par défaut et que j'ajoute progressivement mes propres couleurs. J'essaie d'empêcher le site de gonfler, mais la personnalisation est une chose importante. Nous devons trouver un compromis entre les pages Spartan de Hacker News et Craigslist d'une part et la congestion de l' ancien MySpace d'autre part.

D'une manière ou d'une autre, je suis tombé sur un site Web avec des soulignements animés de fantaisie pour les liens, et je voulais réaliser l'effet. Mais il est important pour moi d'utiliser du CSS pur, car pour des choses aussi frivoles, cela ne vaut pas la peine d'ajouter JavaScript, ce qui peut causer des problèmes avec les performances ou la convivialité de l'interface (voir détournement de la barre de défilement ).

Voici à quoi ressemble l'effet maintenant:

Implémentation

Dessiner des lignes sous le texte est un sujet étonnamment complexe . Tout dépend de la distance à laquelle vous êtes prêt à s'écarter de la norme et des détails qui vous inquiètent (par exemple, en passant par des éléments de lettres distants ).

J'ai exploré deux approches . Les deux suppriment essentiellement la décoration de texte standard et ajoutent une bordure simulée à l'aide de pseudo-éléments . Cette bordure est ensuite animée par des transitions CSS . Malheureusement, ces solutions ont un inconvénient: elles ne fonctionnent pas normalement si le lien couvre plus d'une ligne. Le soulignement n'apparaît que sur la première ligne.


Au final, j'ai trouvé le CodePen de Shaw dépourvu de ce défaut et j'ai changé l'effet à mon goût.


Voici le code pertinent. Vous pouvez jouer avec lui sur 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; } 

Examinons cette solution plus en détail.

Tout d'abord, désactivez la text-decoration standard.

Nous devrons utiliser une image de fond car elle peut couvrir plusieurs lignes. Bien que vous puissiez prendre une vraie photo, ce n’est qu’une ligne, nous utilisons donc un dégradé linéaire qui va générer une image pour nous. Habituellement, il est utilisé pour créer un dégradé entre deux couleurs différentes, mais nous avons besoin que le soulignement soit de la même couleur que le lien, nous utilisons donc currentColor pour le début et la fin du dégradé. currentColor indique au navigateur d'utiliser la couleur de l'élément de la propriété color .

Utilisez la position d' arrière-plan pour placer l'image dans le coin inférieur gauche. Une valeur de 0% correspond à une position horizontale et 100% correspond à une position verticale.

Désactivez la répétition en arrière-plan pour empêcher plusieurs instances de l'image.

À l'aide de la taille d'arrière-plan, spécifiez une largeur et une hauteur nulles de deux pixels. La largeur nulle signifie que le soulignement n'apparaît qu'en survol, sinon l'image n'est pas visible.

Définissez la transition pour l'adapter à l'arrière-plan, de sorte que tout changement de propriété prenne 0.3 seconde.

Lorsque vous survolez un lien, nous modifions la largeur de l'image de 100% , créant un soulignement complet et la transition fournit une animation.

C'est tout! Je suis très satisfait de la brièveté du code. Si vous souhaitez ajouter quelque chose de similaire à votre site, n'hésitez pas à prendre cette implémentation ou à voir d'autres effets de soulignement animés .