How to display a reverse-ordered list in HTML?
CssHtmlCss Problem Overview
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.
Css Solutions
Solution 1 - Css
You could rotate the parent element 180deg and then rotate the children elements -180deg.
ul {
transform: rotate(180deg);
}
ul > li {
transform: rotate(-180deg);
}
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.
ul {
list-style-type:none;
counter-reset:item 6;
}
ul > li {
counter-increment:item -1;
}
ul > li:after {
content: counter(item);
}
Solution 2 - Css
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;
}
Solution 3 - Css
<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>
Solution 4 - Css
If you want to order your list in descending order instead of ascending:
Quick answer: reversed="reversed".
Read below for explanation:
In previous versions of HTML, the only way to achieve this was to place a value attribute on each lielement, with successively decreasing values.
<h3>Top 5 TV Series</h3>
<ol>
<li value="5">Friends
<li value="4">24
<li value="3">The Simpsons
<li value="2">Stargate Atlantis
<li value="1">Stargate SG-1
</ol>
The problem with that approach is that manually specifying each value can be time consuming to write and maintain, and the value attribute was not allowed in the HTML 4.01 or XHTML 1.0 Strict DOCTYPEs (although HTML 5 fixes that problem and allows the value attribute) The new markup is very simple: just add a reversed attribute to the ol element, and optionally provide a start value. If there’s no start value provided, the browser will count the number of list items, and count down from that number to 1.
<h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
<li>Police Academy (Series)
<li>Harry Potter (Series)
<li>Back to the Future (Trilogy)
<li>Star Wars (Saga)
<li>The Lord of the Rings (Trilogy)
</ol>
Since there are 5 list items in that list, the list will count down from 5 to 1. The reversed attribute is a boolean attribute. In HTML, the value may be omitted, but in XHTML, it needs to be written as: reversed="reversed".
Source: https://dzone.com/articles/html-5-reverse-ordered-lists
Solution 5 - Css
Use this hope this help its supported in modern browsers
<ol reversed="reversed" start="3">
<li> lorem ipsum </li>
<li> Lorem ipsum dollar amet </li>
<li> dollar amet </li>
</ol>
Solution 6 - Css
check this link out ... you can use flex-direction: row-reverse;