Аттрибут «start» у нумерованных списков (ol) и css counter

Чтобы сделать красивый нумерованный список, часто приходится использовать css - счетчики. И все бы хорошо, но вот для сложных списков, где список иногда нужно "разрывать" другим контентом и продолжать уже новым списком, но отсчет пунктов чтобы шел с нужной нам цифры. Вот пример:

e4c042e835

Как видите, сначала у нас идет 3 пункта первого нумерованного списка, потом список заканчивается, идет обычный ul список, а потом опять нумерованный, но уже с 4 пункта, а не с 1, как было бы при обычном использовании.

К сожалению, CSS - счетчики не понимают атрибута "start" и ведут отсчет всегда с единицы, если не указано другое число в самом css. Победить эту проблему можно. Привожу сначала CSS-код для нумерованного списка, нас в нем интересует запуск и идентификатор счетчика.

.post ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-bottom: 20px;
}

.post ol li {
  counter-increment: step-counter;
  margin-bottom: 6px;
}

.post ol li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: #57ad68;
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

Ваш код может и будет отличаться, но вам нужно узреть тут идентификатор
step-counter
От него и будем плясать в нашем jQuery-скрипте на 3 строчке:

$('ol[start]').each(function() {
    var val = parseFloat($(this).attr("start")) - 1;
    $(this).css('counter-increment','step-counter '+ val);
});

Теперь наши списки понимают такой полезный атрибут как Старт и работают отлично

Оставить комментарий

avatar
  Подписаться  
Уведомление о