示例请查看本站。
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; }