webdevpro.net

L’objectif de cet article est de réaliser une petite animation au survol de la souris sur un mot dans une page html : faire apparaitre un surlignage au dessus du texte survolé.

L’animation sera réalisée via la nouvelle règle css transition

HTML à animer

<nav class="menu">
 <a href="#" class="menu__item">Lorem.</a>
 <a href="#" class="menu__item">Numquam.</a>
 <a href="#" class="menu__item">Iste.</a>
 <a href="#" class="menu__item">Saepe.</a>
 <a href="#" class="menu__item">Animi?</a>
 <a href="#" class="menu__item">Alias?</a>
 <a href="#" class="menu__item">Iure.</a>
</nav>

CSS

.menu__item {
  display: inline-block;
}

.menu__item:before {
 content: "";
 display: block;
 height: 0.25em;
 width: 0%;
 margin-bottom: 9px;
 background-color: #000;
 transition: width 0.4s;
}

.menu__item:hover:before {
 width: 100%;
}