Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display a reverse-ordered list in HTML?

Tags:

html

css

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. 
like image 253
Monkviper Avatar asked Sep 05 '14 22:09

Monkviper


People also ask

How do you make a reverse ordered list in HTML?

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.

How do you make a descending list in HTML?

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.

Which attribute specifies the list in reversed 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...).


2 Answers

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); } 
like image 159
Josh Crozier Avatar answered Sep 18 '22 08:09

Josh Crozier


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
like image 30
Quentin Avatar answered Sep 18 '22 08:09

Quentin