How to Reverse an Ordered List in HTML?

Reverse Ordered Lists in HTML

Displaying a list in reverse order can be achieved using CSS/SCSS. One method involves setting the parent element to rotate 180 degrees and the child elements to rotate -180 degrees. This method creates a visually inverted list:

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Another approach employs flex boxes and the "order" property. This option achieves a similar result but without rotating the elements:

ul {
    display: flex;
    flex-direction: column-reverse;
}
ul > li {
    order: 1;
}

Alternatively, you can use "counter-increment" along with a pseudo-element, offering another way to display a list in reverse order:

ul {
    list-style-type: none;
    counter-reset: item 6;
}
ul > li {
    counter-increment: item -1;
}
ul > li:after {
    content: counter(item);
}

Select the example links provided in the answers for practical demonstrations.

The above is the detailed content of How to Reverse an Ordered List in HTML?. For more information, please follow other related articles on the PHP Chinese website!