--网站建设,网页设计,网站制作,小程序手机站APP开发-京杭网络

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/25 0:32:30 共计：3567 浏览

完整代码

<!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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条： | ·下一条：

资讯动态