Let's start with some simple CSS code to add a small arrow icon to the left side of our questions. Head back into style.css and modify the styles a bit to add an arrow as follows:

.jsOn dt:before {
  border: 0.5em solid;
  border-color: transparent transparent transparent #f2eeef;
  content: '';
  display: inline-block;
  height: 0;
  margin-right: 0.5em;
  vertical-align: middle;
  width: 0;
}

.jsOn dt:hover:before {
  border-left-color: #ac92ec;
}

You might be wondering about this sort of odd bit of CSS. This is a technique to create triangles in pure CSS without having to use any images. If you're not familiar with this technique, I recommend checking out appendTo's blog post that explains pure CSS triangles at http://appendto.com/2013/03/pure-css-triangles-explained/.

We've also included a hover style so that the triangle will match the text color when the site visitor...