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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 28.03.2023

Есть многоуровневый список...

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

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

Нужно выровнять текст при большей вложености (см.скрин).

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

css html list

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Это происходит из-за ::before, чтобы это исправить, сделайте его абсолютным относительно <li>.

div {
    width: 600px;
}

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

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

ol li {
  position: relative;
}

ol li:before {
   position: absolute;
   top: 0;
   left: -5px;
   transform: translateX(-100%);

   counter-increment: section;
   content: counters(section, '.') '.';
   font-weight: bold;
   color: #022e3f;
}

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

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

Ответы