Как сделать нумерованный список с настройкой в CSS цифр и обратным порядком (...3, 2, 1, 0)?
Есть карточки работ портфолио, которые сделаны в HTML через нумерованный список <ol>. Мне нужно настроить внешний вид чисел этого списка в CSS (убрать точку, шрифт и тень, абсолютное позиционирование) и при этом чтобы нумерация была в обратном порядке и начиналась с нуля: 0, 1, 2, 3...
Обратный порядок в списке делается атрибутом reversed, но тогда не знаю как стилизовать эти цифры. Чтобы их стилизовать я создал свою нумерацию с псевдоэлементом ::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; /* увеличивает значение счетчика */}
Вопрос: как далее можно в настройках CSS сделать чтобы числа шли в обратном порядке?
flex-direction:row-reverse | column-reverse не помогли - верстка карточек ломается.
Сам пример на этой странице: http://mitorun.studio/portfolio.html
Ответы (2 шт):
Если вы используете нумерованный список - <ol>, в первозданном виде, вам не обязательно использовать свою нумирацию content: counter()..
У стандартного тега ol есть атрибут reversed, который отобразит обратный порядок нумерации:
.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>Если же вам нужно изменить порядок элементов, то можно использовать Flexbox и свойство flex-direction: column-reversel;:
.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>Либо вариант с использованием Javascript.
Дополню ответ @CbIPoK2513. В Вашей задаче Flex-wrap работает корректно. Для того, чтобы всё заработало как надо, в классе .cardfield пропишите следующие свойства:
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
В этом случае строка с Вашими карточками будет переворачиваться полностью, а потом разбиваться.