Есть карточки работ портфолио, которые сделаны в 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
не помогли - верстка карточек ломается.