Attention: Le critère du multi-lignes est très important pour ce type d’effet. Si il n’est pas pris en compte, le soulignement peut n’apparaître que sous la dernière ligne de texte du lien.
Ressources en ligne:
- Animated Multiline Link Underlines with CSS par Danny Guo (CodePen)
- Animated CSS underlines that wrap et A CSS-only, animated, wrapping underline using CSS background properties qui m’ont bien aidé a créer l’animation inédite ci-dessous!
- 10 CSS Snippets for Creating Stunning Animated Underline Text Effects
…et un effet que j’ai dû créer moi-même car il n’existait pas dans les ressources ci-dessus. La bordure sous le lien a deux couleurs: couleur lien normal et couleur lien souligné. La particularité de cet effet vient du fait qu’au survol du lien, le changement de couleur s’effectue en partant du milieu (50%) et avec deux balayages simultanés à gauche (pour atteindre 0%) et à droite (pour atteindre 100%).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.link-underline--multiline( @border-color-hover: red; @border-color: black) { padding: 0 0 2px 0; text-decoration: none; background-image: linear-gradient(@border-color-hover, @border-color-hover), linear-gradient(@border-color, @border-color); background-size: 0% 1px, 100% 1px; background-position: 50% 100%, 50% 100%; background-repeat: no-repeat; transition: background-size .1s linear; &:hover { background-size: 100% 1px, 100% 1px; } } |