title: CSS List: Replacing Bullet with Image and Adding Hover
body: <p>I have an unordered list that looks like the following:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="test.html"&gt;Item 1&lt;li&gt;
  &lt;li&gt;&lt;a href="test2.html"&gt;Item 2&lt;/li&gt;
  &lt;li&gt;&lt;a href="test3.html"&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want the bullet that appears to the left of each list item to be replaced by a right-facing triangle. The triangle, along with the text beside it, should change color on hover.</p>
  
  <p>CSS can produce a triangle, but it appears choppy at smaller sizes. Therefore, I'm just looking for code that will allow me to edit the link location of two different triangle images.</p>