3

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

2 ответа 2

6

Если вы используете нумерованный список - <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.

1
  • Я так понимаю тут нет ответа на вопрос. Нужно или стилизовать цифры списка <ol reversed>, или сделать обратный порядок в своей нумерации как сейчас сделано на сайте. C flex-direction: не получается, там идут 3 карточки в ряд и потом переносятся. Можно в дестуллс подставить код прямо на сайте.
    – Mitorun
    Commented 20 сент. 2020 в 10:42
2

Дополню ответ @CbIPoK2513. В Вашей задаче Flex-wrap работает корректно. Для того, чтобы всё заработало как надо, в классе .cardfield пропишите следующие свойства:

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

В этом случае строка с Вашими карточками будет переворачиваться полностью, а потом разбиваться.

2
  • Да, с таким кодом перенос работает верно и в общем решает задачу, но только нужно в HTML карточки поменять местами, и новые соответственно добавлять потом снизу списка, а не сверху. Сложная получилась схема, да и в HTML не хочется располагать контент задом-наперед. Пока сделаю так, но продолжу искать более правильное решение.
    – Mitorun
    Commented 20 сент. 2020 в 15:02
  • @Mitorun Вообще я не понимаю, зачем так всё усложнять. По большей степени, Вам эти цифры и не нужны... Commented 21 сент. 2020 в 11:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.