Прямо керувати видом нумерації в списку не можна, тому доводиться йти іншим шляхом взагалі узяти вихідну нумерацію і зробити власну за допомогою набору властивостей counter-reset та counter-increment. Висновок такої нумерації робиться через псевдоелемент ::before та властивість content, як показано нижче.
>ol { list-style-type: none; /* Забираємо вихідні маркери */
counter-reset: my-counter; /* Задаємо ім'я лічильника */
}
li::before { content: counter(my-counter) '.'; /* Виводимо число з крапкою */
counter-increment: my-counter; /* Збільшуємо значення лічильника */
color: red; /* Колір чисел */
}Для початку у списку ховаємо «рідну» нумерацію, задаючи значення none у властивості list-style-type. Можна також використовувати універсальну властивість list-style, у цьому випадку результат буде однаковий. Далі ініціюємо лічильник, задаючи довільне ім'я лічильника у властивості increment-reset. Це ім'я нам знадобиться надалі для виведення числа та збільшення його на одиницю у кожному пункті списку. Сам висновок відбувається через властивість content зі значенням counter(), у параметрі якого вказуємо ім'я нашого лічильника. content працює у зв'язці з псевдоелементом ::before, до нього додаємо довільні властивості для стилізації чисел списку (приклад 1).
Приклад 1. Власна нумерація
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title> <style> ol { list-style-type: none; /* Забираємо вихідні маркери */
counter-reset: my-counter; /* Задаємо ім'я лічильника */
}
li { margin-bottom: 0.5em; /* Відстань між пунктами списку */
}
li::before { content: counter(my-counter); /* Виводимо число */
counter-increment: my-counter; /* Збільшуємо значення лічильника */
background: #809778; /* Колір тла */
color: #fff; /* Білий колір тексту */
padding: 2px 6px; /* Поля навколо тексту */
margin-right: 0.5em; /* Відстань від цифри до тексту */
}
</style>
</head>
<body> <ol> <li>Перший</li> <li>Другий</li> <li>Третій</li> <li>Четвертий</li>
</ol>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Вигляд власної нумерації списку