Подчеркнутое меню якорь анимации с псевдо CSS

Question

у меня возникают трудности, оживляющие пункт меню,

fiddle

Что мне нужно, что, когда пользователь нажимает на пункте меню бара, который появляется при наведении курсора мыши на переключатель с анимацией.

До сих пор у меня есть 2 бара со следующим кодом, то : после Отправной были : до заканчивается, но я не могу сделать : перед тем бар, чтобы закончить были : после Старт на клик (: активный и: фокус)

Есть ли у кого-нибудь идеи, как это сделать? Я попробовал jquery, но без успеха.

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

Основное внимание в .item не в span, так что ваш селектор должен быть как

nav a:focus span::after 

Здесь у вас есть код https://jsfiddle.net/Lc9gp8fb/9/

- EDIT -

В этом обновлении можно закрыть :before вправо.

Я принялся nav a span:before

margin-right: 50%; 
float: right; 

Чтобы сохранить его в середине, и при наведении его я установил

float: left; 

Так что, когда он парил он будет иметь float: left; и анимация будет слева направо, и когда он не будет виден, анимация будет также слева направо, потому что она будет иметь float: right;

https://jsfiddle.net/Lc9gp8fb/15/

Answer 2

Проблема в том, что: активное состояние не сохраняется после щелчка в чистом css, вам понадобится javascript для завершения анимации.

Answer 3

Yo shold пытаются позиционировать Absolutly в 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%; 
} 

Это позволит сделать ширину линии на 100% щелкать и 50% при наведении курсора мыши. Вы хотите, чтобы вы это искали?