纯css3 动画——光标小下划线跟随

切图网在做项目的时候，为了更好的体验效果，通常我们会给页面加入各种动画，我个人是非常喜欢css3 动画的，下面演示一下简单的css3 动画。

html

• 光标小下划线跟随


• 光标小下划线跟随


• 光标小下划线跟随

css

li{ display: inline-block; position: relative; padding: 0 10px;}

li::before {

content: "";

position: absolute;

top: 0;

left: 100%;

width: 0;

height: 100%;

border-bottom: 2px solid #000;

transition: 0.2s all linear;

}

li:hover::before {

width: 100%;

left: 0;

}

li:hover ~ li::before { left: 0; }

我们这里借助 ~ 选择符，对于当前的hover li ，其对应伪元素的下划线的定位是 left:100%, 而 li:hover~li::before,它的定位是 left:0。

是不是很简单，学习的最终目的是运用，切图网专注于实战培训。