title: Adding a block of colour as a <li> item bullet
body: <p>I would like to change the bullet point in my unordered list to a block of colour that extends the entire depth of the list item, even if the list item wraps across multiple lines.  All wrapped lines for a single list item need to indent at the same depth.</p>
  
  <p>The ultimate effect I am looking for is one long coloured line down the side of the list</p>
  
  <p>At the moment I am using an image set to the same depth as a single list line, but this obviously does not cover multiple lines.  It also puts a small line break between them, and if the list item wraps, the wrapped text sits underneath the bullet</p>
  
  <p>This is my current css</p>
  
  <pre><code>.content-main ul li {
    line-height: 1em;
    float:left;
    text-align:left;
    vertical-align:text-bottom;
    display:list-item;
    list-style-image: url('images/bullet.gif');
    list-style-position:inside;
  }
  </code></pre>
  
  <p>Any pointers on this gratefully received</p>