java鼠标滑过时出现下划线_css动画效果：实现鼠标移入菜单栏文字下出现下划线...

html>

菜单栏下划线动画

body{

margin: 0;

padding: 0;

}

header{

width: 100%;

height: 100px;

background-color:#2D3E50;

}

header nav ul{

width: 50%;

padding: 0;

margin: 0 auto;

}

header nav ul li{

display: inline-block;

padding: 0 0.8em;

}

header nav a{

position: relative;

text-decoration: none;

color: #fff;

display: block;

padding: 1.2em 0.8em;

}

header nav .nav-underline:before {

content: "";

position: absolute;

bottom: 0;

width: 0;

border-bottom: 2px solid #fff;

}

header nav .nav-underline:hover:before {

width: 80%;

}

header nav .nav-underline:before {

-webkit-