Edit in JSFiddle

ul.nudging {
  margin:10px 10px;
  padding:0px 0px;
  font:normal 14px Comic Sans;
}

ul.nudging li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:black;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.29s ease-out;
  -moz-transition:all 0.29s ease-out;
  -ms-transition:all 0.29s ease-out;
  -o-transition:all 0.29s ease-out;
  transition:all 0.29s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
}

<ul class="nudging">
    <li><a href="#">Apel</a></li>
    <li><a href="#">Belimbing</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Durian</a></li>
    <li><a href="#">Elai</a></li>
</ul>