CSS – Effet surlignage au survol de souris
![CSS – Effet surlignage au survol de souris | webdevpro.net](https://webdevpro.net/wp-content/uploads/2017/12/thumb/css3__700x400.png)
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
![](http://webdevpro.net/wp-content/uploads/2019/04/effet-surlignee-css.gif)
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%; }