.nav {
  overflow: hidden;
  position: relative;
  width: 480px; }

.nav a {
  display: block;
  position: relative;
  float: left;
  padding: 1em 0 2em;
  width: 25%;
  text-decoration: none;
  color: #393939;
  transition: .7s; }

.nav a:hover {
  color: #FFFAFA; }

.effect {
  position: absolute;
  left: -12.5%;
  transition: 0.7s ease-in-out; }

.nav a:nth-child(1):hover ~ .effect {
  left: 12.5%; /* the middle of the first <a> */}

.nav a:nth-child(2):hover ~ .effect {
  left: 37.5%;  /* the middle of the second <a> */ }

.nav a:nth-child(3):hover ~ .effect {
  left: 62.5%; /* the middle of the third <a> */}

.nav a:nth-child(4):hover ~ .effect {
  left: 87.5%; /* the middle of the forth <a> */}

.ph-line-nav .effect {
  width: 160px;
  height: 2px;
  bottom: 20px;
  background: #FFFAFA;
  box-shadow: 0 1px 0 white; 
  margin-left:-80x;
}