Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. Pour plus d'informations nous vous invitons à consulter notre Politiques sur les cookies ainsi que notre Politique de confidentialité.

Lien avec effet de soulignement CSS

Dans ce tutoriel, nous allons apprendre à créer des liens avec un effet de soulignement élégant. Lorsque l'utilisateur survole le lien, une ligne apparaît avec une animation fluide.

Ce type d'effet est parfait pour des menus ou des barres de navigation modernes et interactives.

Étape 1 : Structure HTML

Pour commencer, nous avons besoin d'une structure HTML simple pour notre menu. Voici le code HTML utilisé :

<nav class="menu">
  <ul>
      <li>
          <a href="#" title="About">
              <span>About</span>
          </a>
      </li>
      <li>
          <a href="#" title="My page">
              <span>My page</span>
          </a>
      </li>
  </ul>
</nav>

Explications du HTML :

  1. Le menu est contenu dans une balise <nav> avec une classe menu.
  2. Chaque élément du menu est une liste non ordonnée (<ul>), avec des éléments de liste (<li>).
  3. Les liens (<a>) sont encapsulés dans une balise <span>. Cela permet d'ajouter un effet spécifique au texte sans affecter les autres parties du lien.

Étape 2 : Styliser le menu avec CSS

Passons maintenant à la partie CSS pour donner vie à notre effet.

1. Styliser la structure du menu

.menu ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.menu ul li a {
  display: block;
  padding: 1rem;
  text-decoration: none;
}
.menu ul li a span {
  position: relative;
  padding-bottom: .7rem;
}

Explications :

  • .menu ul : Supprime les marges et le padding par défaut, enlève les puces des listes (list-style: none) et aligne les éléments horizontalement avec display: flex.
  • .menu ul li a : Les liens occupent tout l'espace disponible avec display: block et ont un padding pour être plus accessibles.
  • .menu ul li a span : Ajoute un padding-bottom au texte pour faire de la place à l'effet de soulignement et positionne la pseudo-élément :after avec position: relative.

2. Créer l'effet de soulignement

.menu ul li a span:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: transform 250ms;
}
.menu ul li a:hover span:after {
    transform: translateX(0%) scaleX(1);
}

Explications :

  1. :after : Pseudo-élément qui représente la ligne de soulignement.
    • position: absolute : Place la ligne sous le texte.
    • transform: translateX(-50%) scaleX(0) : Par défaut, la ligne est cachée avec un effet de rétrécissement horizontal.
    • transition: transform 250ms : Ajoute une transition fluide de 250ms.
  2. :hover :
    • Lorsque l'utilisateur survole le lien, la ligne est révélée en s'étirant horizontalement grâce à scaleX(1).

Étape 3 : Résultat final

Après avoir appliqué le HTML et le CSS, voici le résultat :

  • Un menu simple et élégant.
  • Lorsque l'utilisateur survole un lien, une ligne apparaît avec une animation fluide.

Améliorations possibles

  • Couleurs personnalisées : Vous pouvez modifier la couleur de la ligne avec background-color pour s’adapter à votre design.
  • Épaisseur de la ligne : Changez la valeur de height dans :after pour une ligne plus fine ou plus épaisse.
  • Durée de l'animation : Ajustez transition: transform 250ms pour accélérer ou ralentir l'effet.
  • Tracé du centre vers les extrémités : Vous pouvez modifier l’animation pour que la ligne commence au centre et s’étende vers les extrémités. Voici comment ajuster le CSS pour cet effet : 
    .menu ul li a span:after {
        content: '';
        position: absolute;
        left: 50%; /* Positionnement initial au centre */
        bottom: 0;
        transform: translateX(-50%) scaleX(0);
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: transform 250ms;
    }
    .menu ul li a:hover span:after {
        transform: translateX(-50%) scaleX(1);
    }
    

    Explication :

    • Le left: 50% centre la ligne horizontalement sous le texte.
    • transform: translateX(-50%) garantit que le centre de la ligne reste aligné avec le texte.
    • En augmentant la valeur scaleX(0) à scaleX(1) au survol, l’animation part naturellement du centre sans nécessiter de modification supplémentaire.


    Avec cette modification, l'effet donne l'impression que la ligne "éclate" à partir du centre vers les bords du texte, ajoutant une touche visuelle encore plus raffinée.

Conclusion

Ce tutoriel montre comment créer un effet de soulignement interactif et élégant pour vos liens en utilisant uniquement HTML et CSS. Cet effet est léger, rapide, et améliore l'expérience utilisateur en rendant vos menus plus dynamiques. Ajoutez-le à vos projets pour une navigation moderne et professionnelle !

 Voir un exemple sur codepen

Haut de la page