How to display a reverse-ordered list in HTML?

Question

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. 

Answer 1

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

Answer 2

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