More-than-one-zero-padded ordered list

Pure CSS (with a bit of js automatization)

by Alexey Ukolov

HTML

<div id="container"></div>

CSS

ol {
  list-style-type: none;
}

ol li {
  counter-increment: listCounter;
}

ol li::before {
  content: counter(listCounter) ". ";
}


ol.tens-of-items li:nth-child(n+1)::before {
    content: "0" counter(listCounter) ". ";
}

ol.tens-of-items li:nth-child(n+10)::before {
    content: counter(listCounter) ". ";
}


ol.hundreds-of-items li:nth-child(n+1)::before {
    content: "00" counter(listCounter) ". ";
}

ol.hundreds-of-items li:nth-child(n+10)::before {
    content: "0" counter(listCounter) ". ";
}

ol.hundreds-of-items li:nth-child(n+100)::before {
    content: counter(listCounter) ". ";
}


ol.thousands-of-items li:nth-child(n+1)::before {
    content: "000" counter(listCounter) ". ";
}

ol.thousands-of-items li:nth-child(n+10)::before {
    content: "00" counter(listCounter) ". ";
}

ol.thousands-of-items li:nth-child(n+100)::before {
    content: "0" counter(listCounter) ". ";
}

ol.thousands-of-items li:nth-child(n+1000)::before {
    content: counter(listCounter) ". ";
}

JavaScript

createList(1);
createList(11);
createList(101);
createList(1001);

setOrderedListsZeroPadding();

function setOrderedListsZeroPadding() {
  var ols = document.querySelectorAll('ol');
  var index;

  for (index = 0; index < ols.length; index++) {
    setOrderedListZeroPadding(ols[index]);
  }
}

function setOrderedListZeroPadding(ol) {
  var size = ol.querySelectorAll('li').length;

  if (size >= 1000) {
    ol.classList.add('thousands-of-items');
  } else if (size >= 100) {
    ol.classList.add('hundreds-of-items');  
  } else if (size >= 10) {
    ol.classList.add('tens-of-items');  
  }
}

// Используется для генерации списка,
// к решению прямого отношения не имеет
function createList(size) {
  var ol = document.createElement('ol');
  var li, index;

  for (index = 1; index <= size; index++) {
    li = document.createElement('li');
    li.textContent = 'Элемент №' + index;
    ol.appendChild(li);
  }

  document.getElementById('container').appendChild(ol);
}