В этой статье мы узнаем, как настроить (украсить) числа в упорядоченном списке. Мы используем свойство counter-increment для украшения чисел.
Подход: сложно добавить стили CSS к элементам <ol> напрямую, чтобы настроить числа. Вместо этого мы получаем доступ к диапазону упорядоченного списка и устанавливаем для стиля списка CSS значение «none», чтобы обычный порядок был невидим. Зная диапазон, мы устанавливаем свойство counter-increment, чтобы упорядочить список, и добавляем свойства CSS для стилизации чисел с использованием других свойств CSS.
В приведенном ниже примере демонстрируется описанный выше подход.
Пример 1. В этом примере мы изменим цвет чисел, используя свойства counter-increment и counter-reset. В этом примере увеличиваются числа от 1 до 4, а цвет устанавливается на «зеленый». Мы можем стилизовать числа в соответствии с нашими требованиями, добавив свойства CSS.
HTML
<!DOCTYPE html><html><head><title>Customize numbers in ordered list</title><style>ol {list-style: none;counter-reset: num;}ol li {counter-increment: num;}ol li::before {content: counter(num) ". ";color: green;}</style></head><body><ol><li>GeeksforGeeks</li><li>Computer Science</li><li>CSS</li><li>HTML</li></ol></body></html>
Выход:
Пример 2. В этом примере мы использовали тот же подход, добавляя еще несколько свойств стиля в тот же HTML-файл.
HTML
<!DOCTYPE html><html><head><title>Customizing numbers in ordered list</title><style>ol {list-style: none;counter-reset: num;}ol li {counter-increment: num;font-size: 20px;}ol li::before {content: "0" counter(num);font-weight: bold;color: green;font-family: 'Segoe UI', Tahoma, Geneva,Verdana, sans-serif;font-size: 20px;}</style></head><body><ol><li>GeeksforGeeks</li><li>Computer Science</li><li>CSS</li><li>HTML</li></ol></body></html>
Выход:
