Box shadow appearing from right to left

Question

I have the following code http://codepen.io/leoamrl/pen/xErdQL which so far is exactly how I want it. Except because I want the Hover effect to appear from right to left. How could I do it with box shadow?

Follow how is the layout to get an idea.

I’m racking my brain but I haven’t got anything yet.

If you have any other solution for this that does not use box shadow also serves, as long as you do not use images.

Thank you very much!

Answer 1

Here’s an idea you can adapt:

*{
  margin:0;
}
.header{
  float:left;
  background-color: blue;
  height:auto;
  padding:16px;
}

li{
  font: 500 16px Poppins, sans-serif;
 
        width:auto;
        margin-right: 20px;
        height:5px;
        display: inline-block;
        line-height:0px;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-attachment: fixed;
        background-size: 205% 100% ;
        background-position:  ;
        transition:all 1s ease;
        list-style-type:none;
        
}
li:hover{
       
        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>