html 导航栏下划线,导航栏文字底部下划线css动画

* {

margin:0;

padding:0;

}

li,a {

text-decoration:none;

list-style:none;

color:#484848

}

.nav {

width:1000px;

height:50px;

border:1px solid #ccc;

margin:0 auto;

line-height:50px;

margin-top:50px;

}

/*-----------------------导航1111111111-----------------------------*/

.nav1 a {

width:70px;

height:100%;

float:left;

margin:0 15px;

position:relative;

text-align:center;

}

.nav1 a span {

margin:auto;

display:inline-block;

position:absolute;

bottom:5px;

left:0;

right:0;

width:0px;

height:2px;

background:#ff0000;

transition:.5s;

border-radius:50px;

}

.nav1 a:hover span {

width:100%;

left:0;

}

/*-----------------------导航2222222-----------------------------*/

.nav2 a {

width:70px;

height:100%;

float:left;

margin:0 15px;

position:relative;

text-align:center;

}

.nav2 a span {

margin:auto;

display:inline-block;

position:absolute;

bottom:5px;

left:0;

width:0px;

height:2px;

background:#ff0000;

transition:.5s;

border-radius:50px;

}

.nav2 a:hover span {

width:100%;

}