Şu Hover Effecttini Nasıl Yapabilirim?

Şu sitedeki http://themenectar.com/demo/salient-...porate-2-news/ Ana menü bileşenlerinin hover efektini nasıl yapabilirim? Sitemdeki ana menüye uygulayıp soldan sağa doğru altının çizilmesini istiyorum.

Görsel: http://prntscr.com/oss24z

Takip

Denemedim fakat sanırım bu sayfayı biraz kurcalamak gerekiyor: https://fatihhayrioglu.com/css3-animasyonanimation/

Aslında basit ama PC başında degilim geçince kod olarak ileteyim

<ul class="snip1135">  <li class="current"><a href="#" data-hover="Home">Home</a></li>  <li><a href="#" data-hover="About Us">About Us</a></li>  <li><a href="#" data-hover="Blog">Blog</a></li>  <li><a href="#" data-hover="Services">Services</a></li>  <li><a href="#" data-hover="Products">Products</a></li>  <li><a href="#" data-hover="Contact">Contact</a></li></ul>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);.snip1135 {  font-family: 'Raleway', Arial, sans-serif;  text-align: center;  text-transform: uppercase;  font-weight: 500;}.snip1135 * {  box-sizing: border-box;}.snip1135 li {  display: inline-block;  list-style: outside none none;  margin: 0 1.5em;  padding: 0;}.snip1135 a {  padding: 0.5em 0;  color: rgba(255, 255, 255, 0.5);  position: relative;  letter-spacing: 1px;  text-decoration: none;}.snip1135 a:before,.snip1135 a:after {  position: absolute;  -webkit-transition: all 0.35s ease;  transition: all 0.35s ease;}.snip1135 a:before {  bottom: 0;  display: block;  height: 3px;  width: 0%;  content: "";  background-color: #2980b9;}.snip1135 a:after {  left: 0;  top: 0;  padding: 0.5em 0;  position: absolute;  content: attr(data-hover);  color: #ffffff;  white-space: nowrap;  max-width: 0%;  overflow: hidden;}.snip1135 a:hover:before,.snip1135 .current a:before {  opacity: 1;  width: 100%;}.snip1135 a:hover:after,.snip1135 .current a:after {  max-width: 100%;}/* Demo purposes only */html {  height: 100%;}body {  background-color: #212121;  display: flex;  justify-content: center;  align-items: center;  flex-flow: wrap;  margin: 0;  height: 100%;}

Burada var aynısı kendinize göre düzenleyebilirsiniz.

Keyframe gerek yok bence en düz mantık border oluşturup sola çekmek overlof ile gizlemek ve hover olunca sağa doğru transition ile çekmek olur
Düz mantığı budur.

width:0px değerini hover da 10px transition animasyon kodu ekliyorsunuz bir tane de yeterli olur