Reverse-Ordered Lists With Custom CSS Counters

Sometimes you need an ordered list that runs backward — newest post first, countdown style. A semantic <ol reversed> handles the simple case, but once you need custom counter styling, the built-in numbering has to go. Here’s how to keep the semantics while taking full control of the numbers.

Why Not Just Use reversed?

HTML’s reversed attribute on an <ol> is the straightforward fix for a plain numbered list. It works fine when default list markers are acceptable.

Custom markers, however, demand more. The ::marker pseudo-element isn’t fully supported across all browsers yet. CSS counters are the dependable, cross-browser alternative for fully styled list numbering.

Replacing Default Numbering With a Counter

Start by disabling the browser’s own counters on the list items, then introduce your own:

/* HTML */
<ol class="custom-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

/* CSS */
.custom-list {
  list-style-type: none; /* removes default numbers */
  counter-reset: a;      /* initializes custom counter */
}

.custom-list li {
  counter-increment: a;  /* increments by 1 each item */
}

.custom-list li::before {
  content: counter(a);
  color: blue;
  font-size: 1.2rem;
}

This yields the counters as ordinary text inside ::before pseudo-elements, so any CSS styling — color, size, margins — applies freely. The count starts at 0 and increments by 1 before display, so the first visible value is 1.

Reversing a Custom Counter

Adding reversed to the HTML has no effect once default numbering is disabled. Keep it anyway for semantic accuracy, but CSS does the visual work.

To count down, you need the total item count. Set the counter to start at total + 1, then make each increment negative:

ol {
  counter-reset: a 4;    /* start at 4 (for 3 items + starting offset) */
}

li {
  counter-increment: a -1; /* count down instead of up */
}

Why 4 for three items? The counter resets to 0 is applied before the first item’s increment. With a negative increment, starting at 4 yields a first display value of 3, and the sequence descends correctly. Starting at 3 would drop to 0 on the final item, which is off by one.

Beyond Simple Lists

With reversed custom counters, the same technique applies to anything ordered visually — step counters running backward, timelines, or numbered business-plan sections — all while preserving a meaningful <ol> in the markup.