<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<div class="content-container">
<div class="list-container">
  <ul>
    <li>
      <strong>Frodo -</strong> A young well-to-do hobbit. When he discovers that the magic ring left to him by his eccentric "Uncle" Bilbo is the One Ring, he reluctantly takes on the quest to destroy it. Often referred to as the Ringbearer.
    </li>
    <li>
      <strong>Gandalf the Grey -</strong> A wizard best known among hobbits for his fireworks and mischievous sense of humor, but actually one of the greatest powers of Middle-earth. He reveals the truth about the Ring to Frodo and acts as a guide and counselor. The leader of the Fellowship. Other names: Stormcrow, Mithrandir, the Grey Pilgrim, the White Rider, Tharkûn, Olórin, Incánus, and Gandalf the White.
    </li>
    <li>
      <strong>Aragorn -</strong> The heir of Isildur and the rightful king of Gondor, a mighty warrior and healer. He was raised by the elves of Rivendell and now lives in exile as leader of the Dúnedain, the Rangers of the North. The time has now come for him to reclaim the throne. He leads the Fellowship after Gandalf's fall. Other names: Strider, Elessar, Elfstone, Dúnadan.
    </li>
  </ul>
</div>
</div>

/* Essential */

ul {
  display: table-row;
  list-style: none;
}

li {
  display: table-row;
  color: #ddd;
}
  
li::before {
  display: table-cell;
  text-align: right;
  content: "+";
  font-size: 1em;
  font-weight: bold;
  color: #FF404C;
  padding-right: 12px;
}


/* Non-essential */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {

  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  
  background-color: #222;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;

  color: #ddd;
  
}

.content-container {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-container {
  width: 80%;
}

strong {
  color: #fff;
}

ul {
  margin: 0;
  padding: 0;
}

li:hover {
  background-color: rgba(256,256,256,0.1);
}
li:before:hover {
  background-color: rgba(256,256,256,0.1);
}
li:not(:first-of-type)::before {
  padding-top: 12px;
}