Menu Hover Effect

<style>
//@import url(http://foulscode.blogspot.gr);
@mixin va ($pos: relative, $top: 50%) {
position: $pos;
top: $top;
transform: translateY(-50%);
}
html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  background-color: #dc143c;
  font: normal 125%/1.5 "Avenir Next", "Source Sans Pro";
  color: rgba(#fff,1);
  text-shadow: 0 1px 1px rgba(#000,.2);
}
.nav {
  text-align: center;
  /* background-color: gold; */
  @include va;

}
.nav ul {
  display: inline-block;
  transform: translate3d(0, 0, 0);
}
.nav li {
  /* float: left; */
  display: inline-block;
}
.nav a {
  position: relative;
  display: block;
  padding: 0 40px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: #fff;
}
.nav a:after {
  position: absolute;

  // This makes the 'border-width' 0, by moving its left and right side
  // to the middle. This way the animation
  // starts from the center (anchor-point) and expands outwards.
  left: 50%;
  right: 50%;

  // Or offset the anchor-point from which the animation expands.
  // As long as it adds up to 100%.
  // left: 70%;
  // right: 30%;
  // It is also possible to reverse this effect, e.g.,
  // set the values here to 40px and on :hover to 50%.
  height: 3px;
  bottom: 10px;
  content: "";
  // background-color: lightsalmon;
  background-color: darken(#dc143c,15%);
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: translate3d(0, 0, 0);
}
.nav a:hover:after {
  left: 40px;
  right: 42px;
}
</style>
<div class="nav">
  <ul>
<li><a href="#URL">Home</a></li>
    <li><a href="#URL">One</a></li>
    <li><a href="#URL">Two</a></li>
    <li><a href="#URL">Three</a></li>
  </ul>
</div>