底部滑动的border

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%;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,750评论 1赞 45
  • 我这也算是经历了“关系文化”
    职场竞争不像学生时代。职场拼的不仅仅是“成绩”或KPI，还要拼着做领导的红人。我没有说赞成“巴结”领导，这只是国内...
    西夕木阅读 435评论 3赞 1
  • 河蚌被捉，野蜜蜂出走
    一觉醒来，恍如隔世。 曾经一切美好的记忆，被笼罩了岁月的幔纱。譬如河蚌中的珍珠，不用心去看，不亲自去探索，就只能看...
    太阳暖暖2008阅读 314评论 6赞 5
  • 读《火印》有感
    雨意正浓，冒着小雨从教室狼狈赶往宿舍。 晚自习结束，原想和舍友一同回去，想到带的那本小说――《火印》，于是又留了下...
    6六六6阅读 766评论 1赞 1
  • 我忘记了名字的野草
    静静的在路边水泥缝中， 默默匍匐在地上， 旁边有落叶相伴。 童年深刻记忆里，野草丛生的田野广阔。 泥土地，见过它，...
    十月芙蓉非芙蓉阅读 105评论 0赞 0