效果展示
大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现一个简单精美的 css 效果。
那么下面我们直接进入正题，先来看看今天的效果展示吧：
关键点
本效果关键点就一个：当 hover 的时候，给当前的图标染色。
但若是单纯在 hover 的时候改变图标的颜色，实际上会出现下面的情况：
并不会像目标中的那样从上往下刷新颜色。
那么，这里的思路就是一个带颜色的覆盖层，初始状态高度为 0，在 hover 的时候令高度为 100% 即可。
具体实现
有了思路，这里的具体实现便相对简单了：
li::before {
font-family: fontAwesome;
position: absolute;
top: 0;
left: 0;
height: 0;
overflow: hidden;
font-size: 6rem;
transition: 0.5s ease-in-out;
}
li:nth-child(1)::before {
content: "\f099";
color: #1da1f2;
border-bottom: 4px solid #1da1f2;
}
li:hover::before {
height: 100%;
}
效果如下：
感兴趣的读者可以看看在线 demo：下拉图标效果
