Как правильно сверстать список?

Question

[Дмитрий]

Надо сделать подобный список


пытался сделать с помощью списка и :after таким образом :
htmlbook.ru/faq/khochu-izmenit-vid-markera-na-drug...

<ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>

li {
    list-style-type: none; /* Убираем маркеры у списка */
   }
   li:before {
    content: "ƥ "; /* Добавляем в качестве маркера символ */
   }

Но когда я сделал список вложенным :before ушел вверх

codepen.io/ddimonn8080/pen/LGwgRB?editors=1100

Получается только если задать :before для .secondLiA и .secondLi сдвинуть паддингом.

вопрос можно ли задать свой символ для вложенного Ul.secondUl чтобы они были на одной линии?

Answer 1

[mletov]

Вам обязательно через :before/ :after делать?

Технически все просто:
ul, li - display block, галку не повторяющимся фоном для li, задать для li padding-left, заголовок и пояснения обрамить в отдельные span и задать им стили

Если есть тонкости семантики, то знатоки меня подправят

<ul>
<li>
<span>1111</span>
<span>2222</span>
</li>
<li>
<span>3333</span>
<span>4444</span>
</li>
</ul>

Answer 2

[Павел Воронюк]

codepen.io/anon/pen/eJqQRQ?editors=1100

Answer 3

[Антон Нагаец]

Пример через list-style-images

<ul>
<li><b>Вклад "Рантье"</b><br/>
Кредит Европа Банк</li>
<li><b>Вклад "Зимний специальный"</b><br/>
Кредит Европа Банк</li>
<li><b>Вклад "Выгодный"</b><br/>
Банк РСБ</li>
</ul>

body{color:#999; font-family:tahoma;}
ul{list-style-image: url(http://htmlbook.ru/themes/hb/img/icon_yes.png);}
li b{color:#7085a0;font-size:12px;}
li {font-size:11px; padding-bottom:5px;}

Comments

[Дмитрий]

Понравился ваш способ.Проверил на всякий случай в ИЕ6. Всё ракботает отлично.

[Антон Нагаец]

Дмитрий: а чему там не работать ) по сути код который нужен это 1 строка,а именно UL, остальное можно выкинуть, это красивости.

[Дмитрий]

С ослом никогда не знаешь чего ожидать)

Answer 4

[trueClearThinker]

А чем не устраивают стили списка: list-style?