Как сделать такое на css?

Question

[KRHD]

Есть такие типы меню как:
1........................ТОВАР
2........................ТОВАР
3........................ТОВАР
4........................ТОВАР
5........................ТОВАР

можно это как-то автоматизировать?
Чтоб в ручную не писать эти точки

Answer 1

[smigles]

Если точек одинаковое количество для каждого пункта меню, можно вынести их в псевдоэлемент ::before или ::after:

<ul>
  <li><span class="number">1</span>Товар</li>
  <li><span class="number">2</span>Товар</li>
  <li><span class="number">3</span>Товар</li>
</ul>

.number::after {
  content: "........................";
}

Если количество точек зависит от количества символов в наименовании товара, то можно реализовать точки через border-bottom:

<ul class="menu">
  <li>1<span class="dots"></span>Товар</li>
  <li>2<span class="dots"></span>Товар</li>
  <li>3<span class="dots"></span>Товар</li>
</ul>

.menu > li {
  display: flex;
}

.dots {
  flex-grow: 1;
  border-bottom: 2px dotted black;
}

Answer 2

[Максим]

С разной длинной

Answer 3

[Amenothis]

Comments

[Amenothis]

Можно еще компенсировать отступ когда в нумерации две цифры - https://jsfiddle.net/68p5xfdy/1/
А то в первом варианте колонка значений будет сдвигаться.

Answer 4

[Евгений Оксенчук]

Методы в джс padstart, padEnd. Они сделают это

Answer 5

[ReActor Дмитрий Вершанский]

Приветствую!
Воспользуйтесь маркированным списком ul > li в котором кастомизируйте дефолтные маркеры (circle) - на свои, через псевдоэлемент ::before или фантомный span, к примеру.