Question

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.

The ultimate effect I am looking for is one long coloured line down the side of the list

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

This is my current css

.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;
}

Any pointers on this gratefully received

Answer 1

You have to switch over to containers (div, span) or something like that.

<div>
  first
  <div>
     second
     <div>
     third 
     </div>
  </div>
</div>

css:

div { border-left:1px solid red }

This will generate lines from the items down to the end of the list.

See my JSFiddle example http://jsfiddle.net/G82eQ/

EDIT: Read your post again, to just display a line for each item – resulting in one long line left of the list, see http://jsfiddle.net/vENx3/