B2主题给顶部页眉菜单增加缩放条

效果图

后面再添加

教程

直接把下面的CSS样式放入后台设置-外观-自定义-额外CSS-添加在最后即可

或者放入子主题的CSS文件。

.header-banner-left .menu li.current-menu-item a:after{
    background-color: #599bff; 
 }
.social-top .header-banner-left .menu li a:after{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%) scaleX(0);
    -ms-transform: translateX(-50%) scaleX(0);
    transform: translateX(-50%) scaleX(0);
    bottom: 6px;
    width: 0;
    height: 2px;
    background-color: #599bff;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.social-top .header-banner-left .menu li a:hover:after{
    width: 100%;
    -webkit-transform: translateX(-50%) scaleX(1);
    -ms-transform: translateX(-50%) scaleX(1);
    -moz-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
}
.header-banner-left .menu li.current-menu-item a {
    color: #599bff;
    font-weight: 600;
}