Красивые упорядочные списки всегда было сложной задачей, где не единственный кто думает об этом. В номера стилей вам нужно удалить стили браузера по умолчанию и добавить элементы списка в элементы списка, чтобы настроить их соответственно.
В этой статье вы узнаете, как добавить некоторую тонкую настройку CSS3 к упорядоченным спискам с использованием семантического подхода.
HTML-код
Ниже вы найдете только простую упорядоченную разметку списка.
Далее я попытаюсь объяснить, как это работает в нескольких словах.
Этот метод использует автоматические счетчики и нумерацию. В основном речь идет об использовании двух свойств CSS 2.1: counter-reset это инициирует счетчик и counter-increment что-то само собой разумеющееся, это увеличивает предыдущий счетчик. Как вы увидите ниже counter-incrementони будут использоваться вместе с CSS-контентом псевдоэлементы.
Некоторые анимации номеров CSS3 также включены в эту демонстрацию. Насколько я знаю, и в настоящее время Firefox является единственным кто поддерживает анимированные псевдоэлементы. Будем надеяться, что это рано или поздно улучшится.