首页>内容

CSS下划线展开效果

小坏蛋 / / 评论 / 阅读 / 赞
作者有点忙，还没写简介

文章描述：

css鼠标放上去下划线展开效果

html

<div id="underline"></div>

css

#underline {
   width:200px;
   height:50px;
   background:#ddd;
   margin:20px;
   position:relative;
}
#underline:after {
   content:"";
   width:0;
   height:1px;
   background:red;
   position:absolute;
   bottom:0;
   left:0;
   transition:all.8s;
}
#underline:hover:after {
   left:0%;
   width:100%;
}
发布时间：2021/07/27

相关阅读

发表评论

登录

最近发表