鼠标经过下划线 css3,鼠标移入下划线展开 CSS3伪类

一 .鼠标移入下划线向两边展开

鼠标移入下划线展开

#underline{

width: 200px;

height: 50px;

background: #ddd;

margin: 20px;

position: relative;

}

#underline:after{

content: "";

width: 0;

height: 5px;

background: blue;

position: absolute;

top: 100%;

left: 50%;

transition: all .8s;

}

#underline:hover:after{

left: 0%;

width: 100%;

}

二.鼠标移入下划线由左向右展开

鼠标移入下划线展开

#underline{

/* width: 200px; */

height: 50px;

background: #ddd;

margin: 20px;

position: relative;

}

#underline:after{

content: "";

width: 0;

height: 5px;

background: blue;

position: absolute;

top: 100%;

left: 0%;

transition: all .8s;

}

#underline:hover:after{

left: 0%;

width: 100%;

}

women