切图网在做项目的时候，为了更好的体验效果，通常我们会给页面加入各种动画，我个人是非常喜欢css3 动画的，下面演示一下简单的css3 动画。
html
<ul>
<li>光标小下划线跟随</li>
<li>光标小下划线跟随</li>
<li>光标小下划线跟随</li>
<li>光标小下划线跟随</li>
<li>光标小下划线跟随</li>
</ul>
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。
是不是很简单，学习的最终目的是运用，切图网不一样的实战项目学习。