footer ul {
  margin-bottom: 0;
  padding-left: 0;
}

footer ul li {
  margin-bottom: .25rem;
}

footer ul li:last-child {
  margin-bottom: 0;
}

footer ul li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.8);
  padding: .35rem .75rem;
  border: 1px solid transparent;
  border-top-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0;
  transition: all .25s ease;
}

footer ul li a::after {
  content: "";
  width: 0;
  height: 14px;
  margin-left: 0;
  opacity: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: all .25s ease;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}

footer ul li a:hover {
  color: #fff;
  background: rgba(85, 85, 85, 0.06);
  border-color: rgba(131, 131, 131, 0.18);
}

footer ul li a:hover::after {
  width: .9rem;
  margin-left: .35rem;
  opacity: 1;
}