От автора: мне нужен был нумерованный список постов в блоге, чтобы они были перечислены от последнего к первому. Как задать обратный порядок пользовательских счетчиков CSS?
Примерно так:
5. Post Title 4. Post Title 3. Post Title 2. Post Title 1. Post Title
Но приведенное выше — это просто текст. Я хотел сделать это с помощью семантического элемента ol.
Простой способ
Это можно сделать с помощью свойства HTML reversed для ol:
<ol reversed> <li>This</li> <li>List</li> <li>Will Be</li> <li>Numbered In</li> <li>Reverse</li> </ol>
Для большинства людей этого будет достаточно. Работа выполнена. Но мне нужны были пользовательские стили для счетчиков. Мы знаем, что пользовательские стили нумерованных списков могут быть заданы с помощью псевдо-элемента ::marker, но он еще не поддерживается Chrome (хотя я слышал, что это скоро это произойдет).
Поскольку мне нужны были полностью совместимые с браузерами пользовательские стили чисел, я использовал собственные счетчики.
Добавление и стилизация пользовательского счетчика
Стилизация счетчиков упорядоченного списка в отличие от остальной части списка требует отключения счетчиков по умолчанию, а также создания и отображения наших собственных счетчиков с использованием CSS Counters. Некоторое время назад Крис поделился несколькими предложениями, которые стоит посмотреть. Предполагая, что у нас есть следующий HTML:
<ol class="fancy-numbered"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
… нам в первую очередь необходимо отключить счетчики по умолчанию, задав для свойства CSS list-style-type — none, примерно так:
ol.fancy-numbered { list-style-type: none;
}Это убирает всю нумерацию по умолчанию. Далее мы создаем счетчик в CSS, чтобы отслеживать количество элементов в списке.
ol.fancy-numbered { list-style-type: none; counter-reset: a;
}Это дает нам счетчик с именем «а», но его можно назвать как угодно. Давайте отобразим наш счетчик, используя псевдо-элемент ::before для элемента списка (li).
ol.fancy-numbered li::before { content: counter(a)'.';
}Это установит для содержимого псевдо-элемента значение нашего счетчика. Прямо сейчас это выводит 1 рядом с элементом списка. Нам нужно указать счетчику CSS, как увеличивать номер элемента.
ol.fancy-numbered li::before { content: counter(a)'.'; counter-increment: a;
}Начальное значение «a» равно нулю, что кажется странным, но приращение по умолчанию равно 1, что означает, что оно становится фактической начальной точкой. Увеличение номера на 1 — это поведение по умолчанию, но мы можем изменить это, как скоро увидим.
Теперь мы можем приступить к применению к счетчику любых пользовательских стилей, потому что счетчик — это просто текстовый псевдо-элемент, который доступен для стилизации:
ol.fancy-numbered li::before { content: counter(a)'.'; counter-increment: a; position: absolute; left: 0; color: blue; font-size: 4rem;
}Например, здесь мы задали синий цвет счетчика и увеличили размер шрифта. Это то, что мы не могли сделать с помощью счетчика по умолчанию.
Реверсивные пользовательские счетчики
Если мы добавим к элементу ol свойство reversed, как мы делали раньше, мы не увидим никакого эффекта, потому что мы отключили нумерацию по умолчанию. Это именно то, что делает это свойство.
<ol class="fancy-numbered" reversed> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Код выше не влияет на пользовательскую нумерацию. Вероятно, это хорошая идея оставить reversed, поскольку мы намерены изменить список. Это сохраняет вещи семантически точными.
Чтобы изменить визуальный порядок нашей нумерации на основе счетчиков, нам нужно знать общее количество элементов в списке и дать указание счетчику начинать нумерацию с этого числа, а затем уменьшать номера.
ol.fancy-numbered { counter-reset: a 4; list-style-type: none;
}Здесь мы устанавливаем для counter-reset значение 4. Другими словами, мы говорим браузеру начинать отсчет с 4 вместо 1. Мы снова используем 4 вместо 3, потому что правило counter() применяется к первому элементу в списке, номер которого равен 0. Но в случае, когда мы считаем в обратном порядке, 4 становится 0. Если бы мы начали с 3 и уменьшили его, мы получили бы 0 вместо 1.
Затем мы изменим правило counter-increment, чтобы задать уменьшение номера на 1, а не увеличение, сделав значение отрицательным целым числом.
ol.fancy-numbered li:before { content: counter(a)'.'; counter-increment: a -1; position: absolute; left: 0; color: blue; font-size: 4rem;
}И это все! Теперь мы можем делать такие нумерации шагов.
Или как насчет тайм-лайнов:
Может быть, бизнес-план?
Автор: Etinosa Obaseki
Источник: https://css-tricks.com
Редакция: Команда webformyself.