Border animation css

Próbuję stworzyć w css dwa border animations, ktore po najechaniu myszka "hover" podkresla tekst. Jeden border ma wysuwac sie od prawej do lewej drugi na odwrot. Jeden jest nad, drugi pod tekstem, niestety póki co oba bordery są nad tekstem, rzeczywiscie jeden leci od prawej do lewej drugi od lewej do prawej, ale spotykaja sie gdzies po srodku i łączą. Jak przerzucic jeden border pod tekst? Kombinowalem z pozycją i nie bardzo mi idzie.

kod css

.klasa h3::before,
.klasa h3::after {
  display: run-in;
position:absolute;
  -webkit-transition:  -webkit-transform 1s, width 1s ease;
  -moz-transition:  -moz-transform 1s,  width 1s ease;
  transition:  transform 1s,  width 1s ease;
}
 
.klasa h3::before {
 
  content: '';
  color:#428BCA;
 
width:0;
border-top: 1px solid blue;
    font-size: 50px;
 
    font-weight: 400;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}
.klasa h3:hover::before {
  margin-left: 3px;
  content: '';
  color:#428BCA;
  line-height: 16px;
width:25%;
border-top: 1px solid blue;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
 
}
.klasa h3::after {
 
  content: '';
  color:#428BCA;
 
width:0;
border-bottom: 1px solid blue;
    font-size: 50px;
 
    font-weight: 400;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}
.klasa h3:hover::after {
  margin-left: 3px;
  content: '';
  color:#428BCA;
  line-height: 16px;
width:25%;
border-bottom: 1px solid blue;
 
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}
.klasa h3:hover::before{
 
  -moz-transform: translateX(0px);
  transform: translateX(0px);
  -moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
 
.klasa h3:hover::after {
 
  -webkit-transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  transform: translateX(-300px);
  -moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
 
div.klasa h3:hover {
  outline: none;
}

html:

<div class="klasa"><h3 class="logo">Tekst</div></h3></div>

Moze ktos wie jak po prostu zrobic animacje border top I bottom jedna od lewej do prawej, druga od prawej do lewej

cos takiego?? http://jsbin.com/hutasame/13/edit