БЛОГ НА HUSL


Как задать background-color для всего пункта (LI) в нумерованном списке (OL)?

Автор вопроса: Student

Вот такой пример у меня окрашивает в красный только текст пункта, а его порядковый номер почему-то нет:

li.red_item {
 background: red;
}
<ol>
  <li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
</ol>

Хотелось бы, чтобы вся строка была одного цвета. Но не знаю, как это можно реализовать...

введите сюда описание изображения

NEW: Ответы по кастомизации даны, но есть проблема: ломается выравнивание нумерации списка, то есть, такого уже нет, если не применять правила типа nth-child(-n+<9>). Замечу, что <9> это все 10^n - 1, где n -> infinity =)

NEWEST: По варианту от @Sevastopol', и объединения его варианта с JS кодом, число элементов списка уже практически приблизилось к 1 000 000, но, я так же постараюсь выполнить тестирование на максимальной конфигурации, которую я смогу найти, для более точного результата. Так же, постараюсь проверить это с другими вариантами решения.

Чистого HTML + CSS для абсолютно любого случая, без заранее указанного смещения, по видимости, нет. Однако, если оно существует, это действительно невероятно, для меня.

Спасибо Всем, кто принимал и принимает участие в этом вопросе, Ваши ответы и комментарии, это стремление к истине, которая, надеюсь, скоро будет определена.


Источник

Ответы (4 шт):

Автор решения: Igor 

ol {
  list-style: none;
  counter-reset: my-counter;
  padding-left: 10px;
}

ol li {
  counter-increment: my-counter;
}

ol li::before {
  content: counter(my-counter) ". ";
  padding-left: 5px;
}

li.red_item {
  background: red;
}

ol li.red_item::before {
  background: red;
}
<ol>
  <li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
</ol>

→ Ссылка
Автор решения: Air 

* {
  margin: 0;
  padding: 0;
}

li {
  list-style-position: inside;
  background: green;
}

li.red_item {
  background: red;
}

li:nth-child(-n+99) {
  padding: 0 0 0 8px;
  background: blue;
}

li:nth-child(-n+9) {
  padding: 0 0 0 16px;
  background: orange;
}
<ol>
  <li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>

</ol>

→ Ссылка
Автор решения: Sevastopol'

p.p.p.s. а можно использовать такую конструкцию

var num = $("#list").find("li").length;
if (num > 9) {$("#list li").css('margin','0 0 0 27px');}
if (num > 99) {$("#list li").css('margin','0 0 0 35px');}
if (num > 999) {$("#list li").css('margin','0 0 0 45px');}
if (num > 9999) {$("#list li").css('margin','0 0 0 55px');}
if (num > 99999) {$("#list li").css('margin','0 0 0 65px');}
if (num > 999999) {$("#list li").css('margin','0 0 0 75px');}
if (num > 9999999) {$("#list li").css('margin','0 0 0 85px');}
if (num > 99999999) {$("#list li").css('margin','0 0 0 95px');}
if (num > 999999999) {$("#list li").css('margin','0 0 0 105px');
  console.log(num);
}
* {
  margin: 0;
  padding: 0;
}

ol {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  margin: 0 0 0 20px;
  padding: 0;
}

li.red_item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  right: 0;
  bottom: 0;
  background: red;
  z-index: -1;
  width: 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<ol>
  <li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li><li>Coffee</li>
  <li class="red_item">Tea</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li class="red_item">Milk</li>
  <li>Milk</li>
  <li>Milk</li>
  <li>Milk</li>
</ol>
</div>

→ Ссылка
Автор решения: Student

@Denis640Kb предложил использовать JS для решения данного вопроса. Несмотря на то, что я сильно надеюсь на то, что кто-то сможет предложить ответ на чистом стеке: HTML + CSS, я все же понимаю, что такой ответ не возможен, если только не генерировать стили со всеми вариантами nth-child или чем-то подобным, поэтому, основываясь на коде от @Denis640Kb (с его выравниванием), я добавил вычисления логарифма и длины строки (не знаю, насколько успешно будет это вычисление в разных версиях браузеров, ОС и т. д.) для определения смещения номера пункта списка.

НО! Only HTML & CSS still wanted :)

//
var canvas = document.createElement('canvas');
//
var context = canvas.getContext('2d');

//
function getTextWidth(text, font) {
  //
  context.font = font;
  //
  var metrics = context.measureText(text);
  //
  return metrics.width;
}

//
window.onload = function() {
  //
  placeholderText = '<ol>';
  //
  for (let i = 0; i < 105; i++) {
    //
    switch (i) {
      //
      case 0: {
        //
        placeholderText += '<li>Tea 1</li>';
        //
        break;
      }

      //
      case 1: {
        //
        placeholderText += '<li class="red_item">Juice</li>';
        //
        break;
      }

      //
      case 9: {
        //
        placeholderText += '<li>Coffee 10</li>';
        //
        break;
      }

      //
      case 99: {
        //
        placeholderText += '<li>Compote 100</li>';
        //
        break;
      }

      //
      default: {
        //
        placeholderText += '<li>Milk</li>';
        //
        break;
      }
    }
  }

  //
  placeholderText += '</ol>';
  //
  document.querySelector('#test').innerHTML = placeholderText;

  //
  let listStyle = window.getComputedStyle(document.querySelector('#test').querySelector('LI'));
  //
  let listFontArr = [];
  //
  if (parseInt(listStyle.getPropertyValue('font-weight'), 10) >= 700)
    //
    listFontArr.push('bold');

  //
  if (listStyle.getPropertyValue('font-style') == 'italic')
    //
    listFontArr.push('italic');

  //
  listFontArr.push(listStyle.getPropertyValue('font-size'));
  //
  listFontArr.push(listStyle.getPropertyValue('font-family'));
  //
  let listFontData = listFontArr.join(' ');

  //
  let list = document.getElementsByTagName('li');
  //
  let lengthInLog10 = Math.log10(list.length) >> 0;
  //
  let listLength = list.length;
  //
  let indexInLog10Last = null;
  //
  let indexInLog10 = 0, diffByTwoLog10 = 0, indexInPow10 = 0, offsetLeft = 0;
  //
  for (let i = 0; i < listLength; i++) {
    //
    indexInLog10 = Math.log10(i + 1) >> 0;
    //
    if (indexInLog10Last != indexInLog10) {
      //
      indexInLog10Last = indexInLog10;
      //
      diffByTwoLog10 = lengthInLog10 - indexInLog10;
      //
      indexInPow10 = Math.pow(10, diffByTwoLog10);
      //
      offsetLeft = getTextWidth((indexInPow10) + '.', listFontData);
    }

    //
    list[i].style.paddingLeft = offsetLeft + 'px';
  }
}
li {
  list-style-position: inside
}

li.red_item {
  background: red;
}
<div id="test"></div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.