CSS navbar animations

[Bartb56]

Hey im trying to make a navbar that has 2 animation when you hover over them

1. a border-top sliding from right to left.

2. a border-bottom sliding from left to right.

 

It's difficult to explain whats happening but if i first have the code with bottom: 0; it will work and make the border at the bottom, but if the code top: 0; is underneath the bottom: 0; it will go at the same height as the bottom: 0; again it's hard to explain

[code]
.nav-menu li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}
.nav-menu li a:before{
   content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background-color: #FFD700;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.nav-menu li a:hover:before, .nav-menu li a:focus:before, .nav-menu li a:active:before {
    right: 0;
}
.nav-menu li a{
    display: inline-block;
    color: white;
    vertical-align: middle;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
}
nav-menu li a:before{
   content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  top: 0;
  background: #FFD700;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.nav-menu li a:hover:before, .nav-menu li a:focus:before, .nav-menu li a:active:before {
    left: 0;
}

[/code]