美文网首页
底部滑动的border

底部滑动的border

作者: 索伯列夫 | 来源:发表于2018-10-07 23:41 被阅读0次

HTML:

  <div>底部滑动的<a>border</a></div>

CSS:

a{
  display:inline-block;
}
a:hover::after{
  content:'';
  display:block;
  top:100%;
  left:0;
  height:2px;
  background: #000;
  animation:0.5s linear silde;
}
@keyframes silde{
  from{
    width:0;
  }
  to{
    width:100%;
  }
}

相关文章

网友评论

      本文标题:底部滑动的border

      本文链接:https://www.haomeiwen.com/subject/bfaraftx.html