.header .nav > li {
position: relative;
display: inline-block;
margin-right: 20px;
padding: 0 5px;
font-size: 16px;
line-height: 76px;
border-bottom: 2px solid transparent;
/* -webkit-transition: all 0.3s ease; */
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
/* transition: all 0.3s ease; */
}
.header .nav > li a {
display: block;
width: 100%;
height: 100%;
color: #222;
}
.header .nav > li: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: -2px;width: 100%;
height: 2px;
background: #3E9AFC;
-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;
}
.header .nav > li:hover:after {
-webkit-transform: translateX(-50%) scaleX(1);
-ms-transform: translateX(-50%) scaleX(1);
-moz-transform: translateX(-50%) scaleX(1);
transform: translateX(-50%) scaleX(1);
}
li:before{
background: radial-gradient(#f1b669 0%, white 60%);
}
hover时,出现的border边框,从中间向两边扩散