使用CSS实现鼠标悬浮标题出现动态下划线

今天来实现下面图片的效果

 

 

要实现这种效果只需要使用到background这个属性了。

首先创建有个div 输入一段文字

然后在设置background属性 

这时候页面就会出现这样子 

文字背景填充满了，无法跟动态图一样那么细。别急，css里还有有个background-size属性，设置一下就可以了 

 

 然后把100%改成0 再给div添加：hover鼠标滑过长度成100%，加个过渡动画。

 效果图：

 到这里发现为什么跟第一张效果图不一样啊，不应该是进去从上面出来然后再下面消失吗。

这时候就需要再：hover属性里面加入

background-position-x: left;

就可以了

就跟效果图一模一样了。