JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ul">
  <li class="title">Главный пункт тест тест тест тест тест тест тест тест тест тест тест</li>
  <li>Подпункт</li>
  <li>Подпункт</li>
  <li>Подпункт</li>
</ul>

<ul class="ul">
  <li class="title">Главный пункт</li>
  <li>Подпункт</li>
  <li>Подпункт</li>
  <li>Подпункт test test test test test test test test test test test test test test test test test test test test test test</li>
</ul>

CSS

body {
  counter-reset: bubu;
}

.title {
  font-weight: bold;
  counter-reset: sub-bubu;
}

.title::before {
  counter-increment: bubu;
  content: "• " counter(bubu) ". ";
}

.ul li:not(.title)::before {  
  counter-increment: sub-bubu;  
  content: "• " counter(bubu) "." counter(sub-bubu);
}

.ul li {
  display: flex;
}

.ul li::before {
  white-space: nowrap;
  padding-right: 5px;
}