How to display a reverse-ordered list in HTML?

I need help. Is there any way to show reverse ordered list in css/scss? Something similar to this:

  5. I am a list item.
  4. I am a list item.
  3. I am a list item.
  2. I am a list item.
  1. I am a list item.

You could rotate the parent element 180deg and then rotate the children elements -180deg.

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

Example Here

Alternatively, you could use flex boxes along with the order property.


Although this isn't technically reversing the order, you could also use counter-increment along with a psuedo element.

Example Here

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

You can use flexbox to achieve this. It allows you to reverse the order with the flex-direction property.

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

li {
    flex: 0 0 auto;
}
  • spec
  • live demo
  • limited browser support

<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 reference
  • w3schools example