我用了33行纯CSS实现了下划线的交互动画效果-烟雨网

theme: channing-cyan # Markdown 主题，默认值：juejin
highlight: atom-one-dark # 代码高亮主题，默认值：theme 中指定，没有则默认为 juejin

背景

最近看到了一个特别炫酷的网站上的一个小细节，下划线的动画。看下他的实现效果。

通过看开发者工具的源码展示，我发现它是整了两条下划线，控制在可视范围内的移入移出实现的。

你看，其实是有两条下划线的渲染的，只不过你看不看得见而已。

但是，假如我们左边并没有足够的空间存放一条不可见的下划线呢？
像这样。

思路与实现

我要把这个下划线也做成文章刚开始的动画。就不是太好借鉴上面的思路。
那我的新思路就是给鼠标移入（hover）操作整两个动画，但一个元素又不能添加两个animation，如果要更换类选择器，又要动用到JS代码，太麻烦了。

于是我就想到了CSS中的::before和::after选择器呀。
让before的线初始宽度为0，鼠标移入就变成100%；让after的线初始宽度为100%，鼠标移入就变成0，这样不就得了。

前提你要记住。

使用width:100%的前提是让其本身或父元素有实际的宽度，我用了width:fit-content。

使用position: absolute的前提是让其父元素有非static的position。

before的实现

.underline::before{
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background: #000;
  width: 0;//初始宽度为0
  left: 0;
  bottom: 0;
  transition: width 1s;
}
.underline:hover::before {
  width: 100%;//鼠标移入就变成100%
}

单独使用上面这段代码可以实现的效果是

after的实现

.underline::after{
  content: "";
  display: block;
  height: 1px;
  background: #000;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: width 1s;
}
.underline:hover::after{
  width: 0;
}

单独使用上面这段代码可以实现的效果是

before和after同时使用

把上面两段代码放一起，就是我们想要的效果了吧。是不是有人蠢蠢欲动啦。
但是！！！

动手快的小伙伴会发现，诶？我两段代码放一起，怎么效果都没了？？？

你猜猜，为什么？

。

好，当然是因为当你把这两个动作同时实现的时候，效果抵消了呀。before往右走的同时after也在往右走，中间根本没有间隙，哪怕他有动画效果，你也是看不见的呀。

所以！！！加个延迟效果咯。

transition-delay：表明动画效果属性生效之前需要等待的时间。

最终效果的实现

想想，该让它怎么加这个延迟，才能实现文章刚开始的效果呢？

before的动画需要在鼠标刚移入时有延迟，但是鼠标移出时立即执行；
after的动画需要在鼠标刚移入时立即执行，鼠标移出时有对应的延迟时间。

只有这样，才能有肉眼可见的闪烁效果。在上面的代码中分别加上如下字段就可以啦～～～

.underline::before{
  transition-delay: 0s;
}
.underline:hover::before {
  transition-delay: 1s;
}
.underline::after{
  transition-delay: 1s;
}
.underline:hover::after{
  transition-delay: 0s;
}

看！这样就做完咯！