ul{
  position: relative;
  display: flex;
}
ul li{
  position: relative;
  list-style: none;
  margin: 0 20px;
  cursor: pointer;
}
ul li a{
  text-decoration: none;
}
ul li a .iconfont{
  font-size: 6em;
  color: #222;
}
ul li::before{
  font-family: 'iconfont';
  position: absolute;
  top:0;
  left: 0;
  font-size: 6em;
  height: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
}
ul li:nth-child(1)::before{
  content: '\e60a';
  color: #1da1f2;
  border-bottom: 4px solid #1da1f2;
}
ul li:nth-child(2)::before{
  content: '\ed0e';
  color: #25d366;
  border-bottom: 4px solid #25d366;
}
ul li:nth-child(3)::before{
  content: '\e8e2';
  color: #ff0000;
  border-bottom: 4px solid #ff0000;
}
ul li:hover::before{
  height: 100%;
}