css - 导航条样式 由两边向中间聚拢
迷茫
迷茫 2017-04-17 13:42:32
0
2
931

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>
迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(2)
小葫芦

雷雷

小葫芦

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板