Как отобразить обратный упорядоченный список в HTML?

Ответ 1

Вы можете повернуть родительский элемент 180deg и затем повернуть дочерние элементы -180deg.

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Пример здесь

В качестве альтернативы вы можете использовать гибкие поля вместе с свойством order.

Несмотря на то, что это не является технически изменением порядка, вы также можете использовать counter-increment вместе с элементом psuedo.

Пример здесь

ul {
    list-style-type:none;
    counter-reset:item 6;
}
ul > li {
    counter-increment:item -1;
}
ul > li:after {
    content: counter(item);
}

Ответ 2

Вы можете использовать flexbox для достижения этого. Это позволяет вам изменить порядок с помощью свойства flex-direction.

ol { 
    display: flex;
    flex-direction: column-reverse;
}

li {
    flex: 0 0 auto;
}

• spec
• живая демонстрация
• ограниченная поддержка браузера

Ответ 3

<ol reversed>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
</ol>

• ссылка w3schools
• пример w3schools