css - 导航条样式由两边向中间聚拢-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

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

824

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; }  首页
 首页2
 首页3

迷茫

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

reply all (2)

小葫芦2017-04-17 13:44:32 2 floor

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

Like+0

Add Reply

小葫芦2017-04-17 13:44:32 1 floor

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

Like+0

Add Reply