<ol>
  <li><a class="arrow"><i class="fas fa-arrow-alt-right"></i>Tetris</a></li>
  <li><a class="arrow"><i class="fas fa-arrow-alt-right"></i>Crazy Taxi</a></li>
  <li><a class="arrow"><i class="fas fa-arrow-alt-right"></i>Super Mario</a></li>
  <li><a class="arrow"><i class="fas fa-arrow-alt-right"></i>Mortal Combat</a></li>
  <li><a class="arrow"><i class="fas fa-arrow-alt-right"></i>Street Fighter</a></li>
</ol>

@import "https://fonts.googleapis.com/css?family=Press%20Start%202P";

* {
  margin: 0;
  padding: 0;
}

html, body {
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: 'Press Start 2P';
  font-size: 1rem;
  line-height: 2;
  height: 100%;
  background-color: #221;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  color: #fff090;
}

li {
  color: #4FAF44;
}

.arrow i {
  display: none;
}

.arrow {
  position:relative;
  display: block;
  color: #F6EB14;
}

.arrow:hover {
  cursor: pointer;
  background-color: rgba(0,0,0,0.2);
}

.arrow:hover i { 
  display: block;
  position: absolute;
  top: 0.50em; 
  left: -6em;
}