Как стилизовать нумерованный список?

[donkos]

Привет, друзья! 

 

Прошу помощи в решении задачи. Уже не знаю как подойти...

 

Необходимо сделать такую стилизацию http://prntscr.com/68s92w . Мои попытки успехом не увенчались:

.content-list ol {    list-style-type: none; /* Убираем исходные маркеры */    counter-reset: num; /* Задаём имя счетчика */   }.content-list  li::before {    content: counter(num) ' '; /* Выводим число */    counter-increment: num; /* Увеличиваем значение счётчика */    color:  #ff0000;    font-weight: 600;    display: inline-block;	padding: 5px;	width: 100px;	height: 100px;	background: url(images/list-style.png) no-repeat;  }

Заранее благодарю!

[Sergik+]

Не надо здесь before, просто зафлотте левую и правую часть и все.

[SelenIT]

Просто зафлоуить нечего. Дефолтные маркеры списков в актуальном CSS никак не управляются.

 

Вариант с псевдиками и CSS-счетчиками — самый логичный и, не побоюсь этого слова, стандартный.

[donkos]

  On 2/23/2015 at 3:19 PM, SelenIT said:

Просто зафлоуить нечего. Дефолтные маркеры списков в актуальном CSS никак не управляются.

 

Вариант с псевдиками и CSS-счетчиками — самый логичный и, не побоюсь этого слова, стандартный.

 

Вопрос: как это сделать?

[mrnobody]

Вот так можно

http://jsfiddle.net/mrnobody/ad5m756j/