How to display a reverse-ordered list in HTML?
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