Question

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

Answer 1

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