利用css3实现鼠标移入下划线向两边展开效果

将其从距离左边50%宽度为0,改变成距离左边0%宽度为100%就可以实现

html
<a>under test</a>


css
a {
  position: relative;
}
a:after {
  content: "";
  width:0;
  height:5px;
  background:blue;
  position:absolute;
  top:100%;
  left:50%;
  transition:all.8s;
}

a:hover:after {
  left:0%;
  width:100%;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,314评论 19赞 139
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 11,711评论 0赞 17
  • 第三者
    叶子的离开，是风的追求还是树的不挽留？ 树和叶子本来是幸福的生活在一起的，这里是一个美丽的花园，充满各种花草树木。...
    胡子长阅读 1,098评论 0赞 1
  • 今天关键词：慢下来
    昨天孩子正式报到开学。接下来，将是我一个人生活的日子，之前每天做饭、上班、下班、打卡、自我提升、做饭、打扫卫生、洗...
    营养私教西西阅读 1,371评论 0赞 0
  • 你的青春想跟什么人一起度过？
    如果我有小孩，我会问她，你想跟什么样的人一起度过青春？ 首先，我并没有小孩，所以你也可以当作这是一篇yy鸡汤文。但...
    百分百视觉控的cherry阅读 3,184评论 0赞 2