Underline Slide
Underline animé en CSS pur : transform: scaleX() + double transform-origin — la barre entre par la gauche au survol et sort par la droite au départ. Zéro JS.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet est 100 % CSS, sans JavaScript. Le pseudo-élément .link-underline-slide::after crée une barre de 2 px (background: #6366f1, indigo) sur toute la largeur du lien (width: 100%), positionnée en bas avec position: absolute; bottom: 0. Par défaut, transform: scaleX(0) la rend invisible ; seule la propriété transform est transitionné (transition: transform .3s). En parallèle, .nav-link-demo transite sa color de #a1a1aa (zinc-400) vers #ffffff sur la même durée de 0,3 s.
Le mécanisme central est un double bascule de transform-origin. Au repos : transform-origin: right center — le pivot de la mise à l'échelle est ancré à droite. Au survol (:hover) : transform-origin: left center — le pivot bascule instantanément à gauche (la propriété n'est pas dans la transition). Seul scaleX est interpolé.
Ce double ancrage crée une animation asymétrique. À l'entrée du curseur : pivot à gauche, scaleX passe de 0 à 1 — la barre croît depuis le bord gauche vers la droite. Au départ du curseur : pivot repasse à droite, scaleX passe de 1 à 0 — le bord gauche remonte vers l'ancre droite pendant que le bord droit reste fixe. L'underline entre par la gauche et sort par la droite sans jamais retracer le même chemin, ce qui donne l'impression d'un glissement directionnel.
Accessibilité
- prefers-reduced-motion absent du code. Les transitions CSS s'exécutent même si l'utilisateur a demandé à réduire le mouvement. À ajouter manuellement :
@media (prefers-reduced-motion: reduce) { .link-underline-slide::after { transition: none; } }. - Contraste texte WCAG AA respecté dans les deux états :
#a1a1aasur#0a0a0f(≈ 5,8:1 au repos) et#ffffffsur#0a0a0f(21:1 au survol). - L'effet repose uniquement sur
:hover— aucuntabindexni:focus-visibledans le code de base. Sur des éléments<span>, ajoutertabindex="0"et.link-underline-slide:focus-visible::after { transform: scaleX(1); transform-origin: left center; }pour les utilisateurs clavier. - Le signal de survol combine deux indices visuels indépendants (couleur du texte + soulignement) — respecte WCAG 1.4.1 sans dépendance à la couleur seule.
- Pas d'attribut
aria-*dans le code de base. Si les éléments restent des<span>, ajouterrole="link"; si ce sont des<a>, unhrefsuffit pour l'accessibilité.
Compatibilité navigateur
Utilise transform, transform-origin et ::after — supportés dans tous les navigateurs modernes depuis IE 9. Zéro dépendance externe.
Sans support des transitions CSS (navigateurs très anciens), l'underline apparaît et disparaît instantanément — aucune erreur JS, la navigation reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="nav-demo">
<span class="nav-link-demo link-underline-slide">Accueil</span>
<span class="nav-link-demo link-underline-slide">Services</span>
<span class="nav-link-demo link-underline-slide">Contact</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --text-secondary | #a1a1aa | Couleur du texte au repos (variable CSS racine). Adaptez à votre gris de navigation. |
| --text-primary | #ffffff | Couleur du texte au survol. Remplacez par votre couleur primaire si le fond n'est pas noir. |
| background dans ::after | #6366f1 | Couleur de la barre d'underline. Remplacez par votre couleur brand ou currentColor pour hériter du texte. |
| height dans ::after | 2px | Épaisseur de la barre. 1 px = discret (footer), 3–4 px = affirmé (onglets actifs). |
| transition: transform .3s dans ::after | 0.3s | Durée de l'animation de l'underline. 0,2 s = vif et réactif, 0,4 s = plus doux. |
| transition: color .3s dans .nav-link-demo | 0.3s | Durée de la transition de couleur du texte. Synchronisez avec la durée de l'underline pour un effet unifié. |
| transform-origin (état par défaut et :hover) | right / left | Inverser les deux valeurs (left center par défaut, right center au hover) donne l'animation dans l'autre sens : entrée depuis la droite, sortie vers la gauche. |
FAQ
<a>, <span>, <li>, <button>) — il suffit d'appliquer la classe link-underline-slide et de s'assurer que l'élément a position: relative. Sur un <a>, ajoutez text-decoration: none pour supprimer le soulignement natif du navigateur avant que votre barre animée prenne le relais.transform-origin dans le CSS : mettez left center dans l'état par défaut et right center dans le bloc :hover::after. L'underline entrera alors depuis la droite et sortira vers la gauche.:hover. Pour les liens navigables au clavier, ajoutez .link-underline-slide:focus-visible::after { transform: scaleX(1); transform-origin: left center; }. Cela affiche l'underline complet lors du focus et respecte WCAG 2.4.7 (focus visible).
