list-style: маркеры списков
list-style настраивает тип, изображение и положение маркеров у элементов списка.
Назначение
list-style настраивает тип, изображение и положение маркеров у элементов списка.
Как это работает
Сокращённая запись объединяет list-style-type, list-style-position и list-style-image. При outside маркер располагается вне основного блока текста пункта, а inside участвует в первой строке.
Пример
<style>
.steps{list-style:decimal outside;padding-left:2rem;max-width:24rem}.steps li{margin-bottom:.6rem}
</style>
<ol class="steps"><li>Подготовьте документ.</li><li>Добавьте достаточно длинное описание шага, чтобы увидеть перенос текста на следующую строку.</li></ol>Что должно получиться
Список сохраняет автоматические номера. Продолжение длинного пункта выравнивается с текстом, а не с внешним маркером.
Граница применения и частая ошибка
Не заменяйте список набором абзацев с нарисованными точками, если это именно перечень. Внешнее оформление можно менять, сохраняя семантическую группировку ul или ol.
Самостоятельная проверка
Сделайте один пункт длинным и сравните inside с outside. Проверьте, куда переносится вторая строка и достаточно ли места для маркера при узком контейнере.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.