body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100vh;

  background-color: #262626;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 50%;
}

.wrapper li {
  float: left;
  text-align: center;

  width: 33.3%;

  list-style: none;
}

.wrapper a {
  display: inline-block;

  width: 100%;
  height: 100%;

  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.wrapper a::after {
  content: attr(data-text);
  display: block;

  opacity: 0;
  transition: all .5s;
}

.wrapper a:hover::after {
  opacity: 1;
  transform: translateY(-30%);
}

.wrapper i {
  /* 如果使用scale，不能是inline，需要block或inline-block */
  display: block;
  font-size: 4em;
  /* 用font-size实现会导致页面颤抖 */
  /* transition: font-size .5s; */
  transition: transform .5s;
}

.wrapper a:hover i {
  transform: translateY(-20%) scale(.8);
}