css3+伪元素如何实现鼠标移入时下划线展开特效？（css中鼠标放上去显示下划线）

完整代码

!DOCTYPEhtml>

html>

head>

metacharset="UTF-8">

title> 鼠标移入下划线展开/title>

styletype="text/css">

#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%;

}

/style>

/head>

body>

divid="underline"> /div>

/body>

/html>

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！