Как у меня может быть тире на моем ul li, когда некоторые из моих li имеют две строки (ipad)

Question

Я работаю над CSS / HTML для этой страницы IPad.

Вот мой код: http://jsfiddle.net/KaWpZ/1/

Какой CSS мне нужениспользовать, чтобы получить тире?и почему я не могу сделать так, чтобы они выравнивались должным образом, чтобы текст во второй строке (например, «Спорт», «Эко», «Обычный» и т. д.) располагался в подкладке, а не под чертой.

Спасибо

Answer 1

С iPad у вас есть доступ к псевдоэлементу :before, позволяющему использовать:

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

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

JS Fiddle demo