Segue uma ideia aí pode adaptar:
ul{
float:left;
list-style-type:none;
}
a*{
text-decorationmargin:none;0;
}
.header{
float: left;
background-color: blue;
height:auto;
padding: 4px;16px;
}
li{
font: 500 .header16px li{Poppins, sans-serif;
width:auto;
margin-right: 20px;
text-alignheight:center;5px;
floatdisplay:left; inline-block;
line-height:0px;
background: linear-gradient(to left, white 50%, blue 50%);
background-sizeattachment: 205% 100%;fixed;
background-positionsize:left bottom;205% 100% ;
transitionbackground-position:all 1s ease;;
}
.header litransition:hover{all 1s ease;
backgroundlist-positionstyle-type:right bottom;none;
}
.header
}
li a:hover{
color:blue;
}
.header li background-position:right;}
a{
text-decoration:none;
color: white;
}
<div class="header">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">sobre</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contato</a></li>
<li><a href="#">suporte</a></li>
</ul>
</div>