ol {
  counter-reset: awesome-counter;
}
ol li {
  margin-bottom: .5em;
  overflow: hidden;
}
ol li:before {
  content: counter(awesome-counter);
  counter-increment: awesome-counter;
  font-size: 2em;
  margin-right: .5em;
  display: inline-block;
  vertical-align: middle;
}
ol li:nth-child(1):before {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  font-size: 3em;
  color: #9b59b6;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #9b59b6;
}
ol li:nth-child(2):before {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  font-size: 2em;
  color: #3498db;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #3498db;
}
ol li:nth-child(3):before {
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  font-size: 5em;
  color: #27ae60;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #27ae60;
}