prntscr.com/5zau1p
как сделать в статьях такой нумерованный список?
#1
31 января 2015 в 15:49
#2
31 января 2015 в 16:25
Аким, скинь ссылку на сайт где сделал скрин, пдскажем
#3
31 января 2015 в 16:29
скинул в личку
Сегодня в 19:38
#4
31 января 2015 в 17:07
Кидайте и мне, постараюсь помочь
#5
31 января 2015 в 17:18
Тоже интересно такое решение.
Там css3 я делал подобное года 2 назад.
При помощи css селектора
Можно выдернуть с исходников откуда взят скрин.
При помощи css селектора
counter-increment: li;
#7
31 января 2015 в 23:11
Вот по быстреньком набросал
Для реализации просто дать списку класс
В итоге получаем
/* Стили для нумерованного списка */ ol.ordered-list { counter-reset:li; /* Указываем, что это нумерованный список */ margin-left:0; /* Левый отступ */ padding-left:0; /* Левый padding */ } ol.ordered-list > li { position:relative; /* Позиционирование */ margin:0 0 6px 2em; /* Даем каждому пункту списка левый край, чтобы создать место для чисел */ padding:4px 8px; /* Добавляем некоторый интервал вокруг содержания */ list-style:none; /* Отключаем страндартную нумерацию */ background:#fff; cursor: default } ol.ordered-list > li:after, ol.ordered-list > li:before { left: -6px; top: 50%; border: solid transparent; content: " "; position: absolute; pointer-events: none; } ol.ordered-list > li:before { content:counter(li); /* Используем для нумерации */ counter-increment:li; /* Вставляем 1 */ /* Позиция номера */ position:absolute; top:4px; left:-33px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:2em; /* Разметка отступа по отношению к создержимому страницы */ margin-right:8px; color:#fff; background:#F96C04; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } .ordered-list li ol, .ordered-list li ul {margin-top:6px;} .ordered-list ol ol li:last-child {margin-bottom:0;} ol.ordered-list > li:after { border-left-color: #F96C04; border-width: 11px; margin-top: -11px; } ol.ordered-list > li:before { border-width: 1px; margin-top: -1px; } /* Стили для нумерованного списка */
<ol class="ordered-list">