Как сделать такое на css?
Если точек одинаковое количество для каждого пункта меню, можно вынести их в псевдоэлемент ::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;
}
Приветствую!
Воспользуйтесь маркированным списком ul > li в котором кастомизируйте дефолтные маркеры (circle) - на свои, через псевдоэлемент ::before или фантомный span, к примеру.