Menu
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. 
253
The reversed attribute of the <ol> element in HTML is used to set reversed ordering of list items in an ordered list. It displays the numbering in descending order and introduced in HTML5.
To set reversed ordering of list items in an ordered list, we can use the reversed attribute of the <ol> element in HTML. It was introduced in HTML5 and shows the numbering in descending order.
The reversed attribute is a boolean attribute. When present, it specifies that the list order should be descending (9,8,7...), instead of ascending (1, 2, 3...).
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
