How to make a numbered list with the CSS setting of numbers and reverse order (...3, 2, 1, 0)?

Question

How to make a numbered list with the CSS setting of numbers and reverse order (...3, 2, 1, 0)?

There are portfolio work cards that are made in HTML via a numbered list <ol>. I need to customize the appearance of the numbers in this list in CSS (remove the dot, font and shadow, absolute positioning) and at the same time that the numbering is in reverse order and starts from zero: 0, 1, 2, 3...

The reverse order in the list is done by the attribute reversed, but then I don't know how to style these numbers. To style them I created my own numbering with a pseudo element ::before:

ol {list-style-type: none; /* Убирает исходные маркеры списка */
    counter-reset: my-numbers -1; /* задает имя счетчику (обнуляем счетчик списка) */}
li {position: relative;}
li::before {position: absolute;
    top: 86px;
    right: 30px;
    content: counter(my-numbers); /* выводит число */
    counter-increment: my-numbers; /* увеличивает значение счетчика */}

Question: how can I make the numbers go in reverse order in the CSS settings? flex-direction:row-reverse | column-reverse did not help - the layout of the cards breaks down. The example itself is on this page: http://mitorun.studio/portfolio.html

1

html css список

Author: Mitorun, 2020-09-19

Source

2 answers

score 4 · Answer 1

If you use a numbered list - <ol>, in its original form, you don't have to use your own numbering content: counter()..

The standard ol tag has an attribute reversed that will display the reverse order of numbering:

.c-num {
  counter-reset: a 7;
  list-style: none;
  padding: 0;
}

.c-num > li::before {
  content: counter(a);
  counter-increment: a -1;
  display: inline-block;
  margin-right: 5px;
}

<h2>Кастомная нумерация</h2>
<ol class="c-num" reversed>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

<h2>Дефолтная нумерация</h2>
<ol reversed>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

If you need to change the order of the elements, you can use Flexbox and the flex-direction: column-reversel; property:

.reverse {
  display: flex;
  flex-direction: column-reverse;
}

.c-num {
  counter-reset: a 0;
  list-style: none;
  padding: 0;
}

.c-num > li::before {
  content: counter(a);
  counter-increment: a;
  display: inline-block;
  margin-right: 5px;
}

<h2>Кастомная нумерация</h2>
<ol class="c-num reverse">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

<h2>Дефолтная нумерация</h2>
<ol class="reverse">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

Or a variant using Javascript.

score 1 · Answer 2

I will supplement the answer of @CbIPoK2513. Flex-wrap works correctly in your task. In order for everything to work as it should, in the .cardfield class, enter the following properties:

    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;

In this case, the line with your cards will be flipped completely, and then broken.