Time for action – adding some final touches

Perform the following steps to add some finishing touches to our FAQ list:

1. 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...