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 :
- Le menu est contenu dans une balise
<nav>
avec une classemenu
. - Chaque élément du menu est une liste non ordonnée (
<ul>
), avec des éléments de liste (<li>
). - 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 avecdisplay: flex
..menu ul li a
: Les liens occupent tout l'espace disponible avecdisplay: block
et ont un padding pour être plus accessibles..menu ul li a span
: Ajoute unpadding-bottom
au texte pour faire de la place à l'effet de soulignement et positionne la pseudo-élément:after
avecposition: 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 :
: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.
:hover
:- Lorsque l'utilisateur survole le lien, la ligne est révélée en s'étirant horizontalement grâce à
scaleX(1)
.
- Lorsque l'utilisateur survole le lien, la ligne est révélée en s'étirant horizontalement grâce à
É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. - Le
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 !