网页布局------导航栏下标缩放显示

实现迅雷导航栏下班缩放显示效果https://www.xunlei.com/

 

.nav-bar li::after{
　　position:abaolute;
　　bottom:0;
　　left:0;
　　content:"";
　　width:100%;
　　height:2px;
　　background-color:black;
　　transform:scaleX(0);
　　tansition:all .4s ease;
}
.nav-bar li:nth-child(1)::after{
　　transfoorm:scaleX(1);
}
.nav-bar li:hover::after{
　　transform:scaleX(1);
}