Отступ в CSS, используя специальный формат в заголовке

Question

Я хотел бы добиться следующего с помощью CSS:

До сих пор я использовал следующий CSS-код для перемещения отдельных элементов вправо:

[title^='10.10'] {
 position: relative;
 left: 10px;
    }

Но я хотел бы спросить вас, ребята, знаете ли вы какой-нибудь более простой прием, возможно, по стилю символов в начале заголовка (если это даже возможно в CSS) для массового перемещения контента из того же иерархического слоя.

Проблема помимо всего этого в том, что сами элементы имеют разные идентификаторы, что означает, что я довольно зависим от грязного обходного пути с CSS.

Часть HTML-кода, видимая с помощью Dev-Tools:

Или, может быть, JS и JQuery могут это сделать?

Заранее спасибо

Answer 1

Я бы использовал списки, вот очень короткий пример, я использовал вложенные списки, вы можете изменить padding-left на элементе ul, чтобы увеличить или уменьшить отступ.

ul{
  list-style: none;
  padding-left: 20px;
}

<ul>
  <li>one line</li>
  <li>one line</li>
  <li>
    <ul>
      <li>one line</li>
      <li>one line</li>
      <li>one line</li>
      <li>
        <ul>
          <li>one line</li>
          <li>one line</li>
          <li>one line</li>
          <li>one line</li>
         </ul>
      </li>
    </ul>
  </li>
  <li>one line</li>
</ul>