#list {
  margin-bottom: 80px;
}
#list li {
  font-size: 18px;
  border-bottom: 1px dashed #ccc;
}
#list li a {
  position: relative;
  display: block;
  padding: 15px 1em;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(50%, #fff), color-stop(50%, #333));
  background: linear-gradient(to right, #fff, #fff 50%, #333 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  -webkit-transition: background-position 0.5s ease;
  transition: background-position 0.5s ease;
}
#list li a:hover {
  background-position: 0 100%;
}
#list li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #000;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
          transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
#list li a:hover:before {
  width: 100%;
}