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
    20 сен 2020 в 10:42
2

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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