Как сделать нумерованный список с точкой?

Question

Как сделать список формата.

1.Главный пункт (жирный текст.)
1.1 Подпункт
1.2 Подпункт
1.3 Подпункт

2.Главный пункт (жирный текст.)
2.1 Подпункт
2.2 Подпункт
2.3 Подпункт

Я когда через простые абзацы сделал, то столкнулся с проблемой если текста много, то он переносится под пункт меню, а 1.1 1.2 - должен быть типо как маркер и всегда быть справа, под ним не должно быть текста при переносе.

Answer 1

Всю нумерацию можно собрать из CSS-counter() и добавить к ним символ •

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;
}

<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>

БЛОГ НА HUSL

Как сделать нумерованный список с точкой?

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