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