CSS Underline effect

by Léo Durand

HTML

<div class="link-menu">
  <span class="underline-menu ulPlayground"></span>
  <span class="title-menu">Playground</span>
</div>
<div class="link-menu">
  <span class="underline-menu ulDynamikaj"></span>
  <span class="title-menu">Dynamikaj</span>
</div>
<div class="link-menu">
  <span class="underline-menu ulPortugal"></span>
  <span class="title-menu">Portugal</span>
</div>
<div class="link-menu">
  <span class="title-menu">Length 
  <span class="underline-menu ulSerigraphie">  
  </span>
  </span>

</div>

CSS

.link-menu {
  width: 300px;
  padding: 10px 0 10px;
}

.title-menu {
  font-family: Maison Neue;
  margin-left: 10px;
  position: relative;
   display:inline-block;
 background:yellow;
}  
.title-menu a {

}

.link-menu:hover > .underline-menu {
  width: 100%;
}

.underline-menu {
  width: 0px;
  height: 15px;
  margin-top: 10px;
  position: absolute;
  transition: 0.6s ease;
}

.underline-menu.ulPlayground {
  background: rgba(4, 77, 234, 0.3);
}

.underline-menu.ulDynamikaj {
  background: yellow;
}

.underline-menu.ulPortugal {
  background: green;
}

.underline-menu.ulSerigraphie {
  background: red;
}