本文介绍如何仅用CSS实现下划线的交互动画效果，通过结合before和after选择器，利用width、position和transition-delay属性，创建出鼠标移入时下划线动态伸缩的效果。详细讲解了各个步骤，包括单独使用before和after的选择器，以及解决两者同时使用时的效果抵消问题。最后展示了完整代码，并提示总共使用了33行CSS。
背景
最近看到了一个特别炫酷的网站上的一个小细节，下划线的动画。看下他的实现效果。
但是，假如我们左边并没有足够的空间存放一条不可见的下划线呢？ 像这样。
思路与实现
我要把这个下划线也做成文章刚开始的动画。就不是太好借鉴上面的思路。那我的新思路就是给鼠标移入（hover）操作整两个动画，但一个元素又不能添加两个animation，如果要更换类选择器，又要动用到JS代码，太麻烦了。
于是我就想到了CSS中的::before和::after选择器呀。让before的线初始宽度为0，鼠标移入就变成100%；让after的线初始宽度为100%，鼠标移入就变成0，这样不就得了。
前提你要记住。
1.使用width:1
最低0.47元/天 解锁文章
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
