How to display a reverse-ordered list in HTML?

I need you quick help. Is there any way in css/scss to show reverse ordered list. Something like 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.

solution

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