css - 带有伪CSS的下划线菜单 anchor 动画

Question

我在为菜单项设置动画时遇到困难，

fiddle

我需要的是，当用户单击菜单项时，悬停时出现的栏会通过动画切换一侧。

到目前为止，我有 2 个带有以下代码的小节，:after 开始是 :before 结束，但我无法制作 :before 结束栏是 :after 开始点击(:active 和 :focus)

有没有人知道如何做到这一点？我试过 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/

-- 编辑 --

通过此更新，您可以关闭右侧的 :before。

我设置为 nav a span:before

margin-right: 50%;
float: right;

为了保持它在中间，当悬停它时我设置

float: left;

所以，当它悬停时，它会有 float: left; 并且动画将从左到右，当它没有悬停时，动画也会从左到右，因为它将有 float: right;

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