How can I have dashes on my ul li, when some of my li's have two lines (ipad)

I'm working on the css / html for this ipad page.

Here's my code: http://jsfiddle.net/KaWpZ/1/

What CSS do i need to use to get dashes? and why can't I make them align properly on so that the text on the second line (like Sport, eco, normal etc) sits padded and not underneath the 开发者_如何转开发dash.

Thanks

With an iPad you've got access to the :before pseudo-element, allowing you to use:

ul li{
    padding-left: 1em;
    position: relative; 
}

ul li:before {
    content: '-';
    position: absolute;
    left: 0;
}

JS Fiddle demo