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

Question

[Don Puh]

Есть многоуровневый список... можно посмотреть на
. Нужно выровнять текст при большей вложености (см.скрин). Есть ли варианты сделать, не прибегая к каскаду и отступам по каждому из уровней. Да и в целом какие варианты решения есть...

<div>
	<ol>
		<li>Заголовок должен быть короче трех строк.</li>
		<li>При названии разделов используйте уже устоявшиеся термины, такие
			как гостевая книга, чат, ссылка, главная страница и другие.
			<ol>
				<li>Заголовок должен быть короче трех строк.</li>
			</ol>
		</li>
		<li>Перед использованием специального термина или слова, решите,
			будет ли оно понятно читателю.
			<ol>
				<li>Заголовок должен быть короче трех строк.</li>
				<li>При названии разделов используйте уже устоявшиеся термины, такие
					как гостевая книга, чат, ссылка, главная страница и другие.
					<ol>
						<li>Заголовок должен быть короче трех строк.</li>
						<li>При названии разделов используйте уже устоявшиеся термины, такие
							как гостевая книга, чат, ссылка, главная страница и другие.
						</li>
					</ol>
				</li>
				<li>Перед использованием специального термина или слова, решите,
					будет ли оно понятно читателю.
				</li>
			</ol>
		</li>
	</ol>
</div>

div {
	width: 600px;
}

ol {
   list-style-type: none;
   counter-reset: section;
   text-align: justify;
}

li {
   margin: .5em 0 .5em 1em;
   position: relative;
}

ol li:before {
   counter-increment: section;
   content: counters(section, '.') '.';
   display: inline-block;
   font-weight: bold;
   color: #022e3f;
   margin: .2em 1em .2em -1em;
}

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[pantsarny]

ol {
list-style-position: outside;
}

Comments

[Don Puh]

Ничего не изменилось.

[pantsarny]

вы скрыли нативный элемент и сделали свой через :before
если вы сделаете ol li:before position: absolute то будете близки к решению

[Don Puh]

Нативный элемент нумерует сначала. Абсолютное позиционирование почему не рассматриваю, потому что нужно будет регулировать отступ на нижних уровнях, т.к. длина списка становится больше и он не будет двигать текст.