Underline menu anchor animation with pseudo css - css

Question

i'm having difficulties animating a menu item,
fiddle
What i need is that, when a user clicks the menu item the bar that appears on hover to switch side with an animation.
So far i have 2 bars with the following code, the :after starting were the :before ends, but i can't make the :before bar to finish were the :after start's on click (:active and :focus)
Does anyone has some idea how to do this? i try'ed jquery but with no success.
HTML:
<a class="item" href="http://www.google.com" title=" competências" target="_blank">
<span class="nav-item">Competências</span>
</a>
<a class="item" href="" title=" Industrias" target="">
<span class="nav-item">Industrias</span>
</a>
<a href="" title=" Soluções" target="">
<span class="nav-item">Soluções</span>
</a>
<a class="item" href="" title=" About" target="">
<span class="nav-item">About</span>
</a>
<a class="item" href="" title=" Parceiros" target="">
<span class="nav-item">Parceiros</span>
</a>
<a class="item" href="" title=" Pessoas" target="">
<span class="nav-item">Pessoas</span>
</a>
<a class="item" href="" title=" Contactos" target="">
<span class="nav-item">Contactos</span>
</a>
<span class="skew-bar"></span>
<a class="item" href="" title=" Blog" target="">
<span class="nav-item">Blog</span>
</a>
<a class="item" href="" title=" Notícias" target="">
<span class="nav-item">Notícias</span>
</a>
<a class="item" href="" title=" Recursos" target="">
<span class="nav-item">Recursos</span>
</a>
<span class="skew-bar"></span>
<a class="item" href="" title=" English" target="">
<span class="nav-item">EN</span>
</a>
</nav>
CSS:
nav a {
font-family: 'Roboto',sans-serif;
font-size: 1em;
font-weight: 300;
text-decoration: none;
}
/*BEFORE ON HOVER*/
nav a span:before {
border-bottom: 3px solid black;
display: block;
position: relative;
z-index: 2;
left: 0%;
transform: translateY(22px);
width: 1px;
background: #000;
overflow: hidden;
content: '';
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
-o-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
-webkit-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear;
-webkit-transition-delay: 0s, 0.3s;
transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
}
nav a span:hover::before {
width: 50%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
position:relative;
overflow: hidden;
}
/*BEFORE ON CLICK FOCUS*/
nav a span:after {
border-bottom: 3px solid black;
display: block;
position: relative;
z-index: 2;
left: 50%;
transform: translateY(-3px);
width: 1px;
background: #000;
overflow: hidden;
content: '';
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
-o-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
-webkit-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear;
-webkit-transition-delay: 0s, 0.3s;
transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
}
nav a span:active::after,nav a span:focus::after {
width: 50%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
position:relative;
overflow: hidden;
}

Answer 1

The focus is in the .item not in the span, so your selector should be like
nav a:focus span::after
Here you have the code working https://jsfiddle.net/Lc9gp8fb/9/
-- EDIT --
With this update you can close :before to the right.
I set to nav a span:before
margin-right: 50%;
float: right;
To keep it in the middle, and when hover it I set
float: left;
So, when it is hovered it will have float: left; and the animation will be from left to right, and when it is not hovered the animation will be also from left to right because it will have float: right;
https://jsfiddle.net/Lc9gp8fb/15/

Answer 2

The problem is that the :active state does not persist after click in pure css, you will need javascript to end the animation.

Answer 3

Yo shold try to position absolutly the pseudoelements:
nav a {
font-family: 'Roboto',sans-serif;
font-size: 1em;
font-weight: 300;
text-decoration: none;
position: relative
}
nav a span:before {
content:'';
display:block;
position:abolute;
top:100%;
height:3px;
background-color:#000000;
transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
}
nav a span:before {
left: 0%;
right: 100%;
}
nav a:hover span:before {
right: 50%;
}
nav a span:after {
left: 100%;
right: 0%;
}
nav a:active span:after {
left: 50%;
}
This will make a 100% width line on clicking and 50% on hover. Is this waht you are looking for?