.wrapper {
  width:600px;
	margin:10px auto;
  font-size: 50px;
  font-weight: 100;
}
a {
  color: #000;
  text-decoration: none;
}
a span {
  font-weight: 100;
  transition: all .5s;
  border-bottom: 1px solid;
}
a span:nth-child(2) {
  transition-delay: .1s;
}
a span:nth-child(3) {
  transition-delay: .2s;
}
a span:nth-child(4) {
  transition-delay: .2s;
}
a span:nth-child(5) {
  transition-delay: .3s;
}
a span:nth-child(6) {
  transition-delay: .3s;
}
a span:nth-child(7) {
  transition-delay: .3s;
}
a:hover span {
  font-weight: 800;
}
a:hover span:nth-child(7) {
  transition-delay: .3s;
}
a:hover span:nth-child(6) {
  transition-delay: .3s;
}
a:hover span:nth-child(5) {
  transition-delay: .3s;
}
a:hover span:nth-child(4) {
  transition-delay: .3s;
}
a:hover span:nth-child(3) {
  transition-delay: .2s;
}
a:hover span:nth-child(2) {
  transition-delay: .1s;
}
a:hover span:nth-child(1) {
  transition-delay: 0s;
}
a.hover-shadow:hover {
  text-shadow: 1px 1px 0px #ddd, 2px 2px 0px #ddd, 3px 3px 0px #ddd;
}
a.hover-color:hover {
  border-color: darkmagenta;
}