Link fungerer forkert med hover

Jeg har opdelt min navigation i 2 dele. En i højre og en i venstre. I venstre side står mine links opstillet i lister. Jeg vil have en effekt på, så når man kører musen henover linksne kommer min 'cl-effect-3' på. Det gør den skam også, men den står forkert. Se billede herunder:
http://prntscr.com/4xoyot Det er den hvide streg der står ved siden af linket jeg holder over. Jeg vil have stregen til at stå under med en bredde som min tekst.
Min HTML kode ser således ud:

 <nav class="cl-effect-3">
 <div class="wrapper">
  <div id="left_menu">
   <h1>Navn</h1>
  </div>
  <div id="right_menu">
   <ul>
    <li><a href="index.php" title="HOME">HOME</a></li>
    <li><a href="about.php" title="ABOUT">ABOUT</a></li>
    <li><a href="gallery.php" title="GALLERY">GALLERY</a></li>
   </ul>
  </div>
 </div>
 </nav>

Og min CSS kode for links og lister sådan:

 .cl-effect-3 a {
     float:left;
 }
 
 .cl-effect-3 a::after {
     position: absolute;
     top: 80%;
     width:50px;
     height: 2px;
     background:rgba(255,255,255,.30);
     content: '';
     opacity: 0;
     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
     -moz-transition: opacity 0.3s, -moz-transform 0.3s;
     transition: opacity 0.3s, transform 0.3s;
     -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
     transform: translateY(10px);
 }
 
 .cl-effect-3 a:hover::after,
 .cl-effect-3 a:focus::after {
     opacity: 1;
     -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
     transform: translateY(0px);
 }
 nav {
     width:100%;
     min-height:67px;
     max-height:67px;
     position:relative;
     background-image:url(../img/nav_bg.png);
     background-repeat:repeat-x repeat-y;
 }
 li {
     display:inline;
     list-style:none;
 }
 nav a {
     float:left;
     margin-right:20px;
     color:white;
     text-decoration:none;
 }