css - 导航条样式由两边向中间聚拢-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

迷茫 2017-04-17 13:42:32

[HTML讨论组]

1027

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)

高洛峰2017-04-17 13:44:32 2楼

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

赞 +0

添加回复

高洛峰2017-04-17 13:44:32 1楼

.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%;
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>