示例请查看本站。
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;
}
调用方法:
后台设置-外观-自定义-额外CSS-添加在最后即可
感谢分享!
泰裤辣