背景
最近看到了一个特别炫酷的网站上的一个小细节，下划线的动画。看下他的实现效果。
但是，假如我们左边并没有足够的空间存放一条不可见的下划线呢？ 像这样。
思路与实现
我要把这个下划线也做成文章刚开始的动画。就不是太好借鉴上面的思路。那我的新思路就是给鼠标移入（hover）操作整两个动画，但一个元素又不能添加两个animation，如果要更换类选择器，又要动用到JS代码，太麻烦了。
于是我就想到了CSS中的::before和::after选择器呀。让before的线初始宽度为0，鼠标移入就变成100%；让after的线初始宽度为100%，鼠标移入就变成0，这样不就得了。
前提你要记住。
1.使用width:100%的前提是让其本身或父元素有实际的宽度，我用了
width:fit-content。
2.使用position: absolute的前提是让其父元素有非static的position。
before的实现
.underline::before{content: "";display: block;position: absolute;height: 1px;background: #000;width: 0;//初始宽度为0left: 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：表明动画效果属性生效之前需要等待的时间。
最终效果的实现
想想，该让它怎么加这个延迟，才能实现文章刚开始的效果呢？
1.before的动画需要在鼠标刚移入时有延迟，但是鼠标移出时立即执行；
2.after的动画需要在鼠标刚移入时立即执行，鼠标移出时有对应的延迟时间。
只有这样，才能有肉眼可见的闪烁效果。在上面的代码中分别加上如下字段就可以啦～～～
.underline::before{transition-delay: 0s;
}
.underline:hover::before {transition-delay: 1s;
}
.underline::after{transition-delay: 1s;
}
.underline:hover::after{transition-delay: 0s;
}
看！这样就做完咯！
到此这篇关于纯CSS实现了下划线的交互动画效果的文章就介绍到这了,更多相关CSS下划线交互内容请搜索 『沙漠渔溏』 以前的文章或继续浏览下面的相关文章，希望大家以后多多支持 『沙漠渔溏』 ！