导航条样式 由两边向中间聚拢

1.一个样式问题 想要滑过导航的时候 导航上的线由两边向中间聚拢。我现在实现了的是由中间向两边扩散 是哪块写的不对了。
代码如下：

.nav-header li{
    float:left;
}
.nav-header a{
    display: block;
    float:left;
    padding:0 20px;
    color:#fff;
    position:relative;
}
.nav-header a:hover{

}
.nav-header a:before,.nav-header a:after{
    content:"";
    display: block;
    height: 3px;
    background:none;
    position:absolute;
    top:0;
    width:50%;
    transition:all .5s;
    
}
.nav-header a:before{
    left:50%;
}
.nav-header a:after{
    right:50%;
}
.nav-header a:hover:before{
    background: #fff;
    left:0;
}
.nav-header a:hover:after{
    background: #fff;
    right:0;
}

<ul class="nav-header">
            <li><a>首页</a></li>
            <li><a>首页2</a></li>
            <li><a>首页3</a></li>
        </ul>

---

.nav-header li{
    float:left;
}
.nav-header a{
    display: block;
    padding:0 20px;
    color:#fff;
    position:relative;
}
.nav-header a:before,
.nav-header a:after{
    content:"";
    height: 3px;
    background:none;
    position:absolute;
    top:0;
    width:0;
    transition:all .5s;
}
.nav-header a:before{
    left:0;
}
.nav-header a:after{
    right:0;
}
.nav-header a:hover:before,
.nav-header a:hover:after{
    background-color:#fff;
    width:50%;
}

---

.nav-header a { overflow: hidden; }
.nav-header a:before { left: -50%; }
.nav-header a:after { right: -50%; }