У нумерованому списку номер кожного пункту виводиться з точкою. При цьому якось змінити вид числа, наприклад, прибрати точку або поставити дужку, не можна. Тому взагалі прибираємо вихідну нумерацію та виводимо свою за допомогою псевдоелемента ::before та властивості content. Щоб нумерація працювала та збільшувалася з кожним пунктом, потрібно додати властивість counter-reset з довільним ім'ям лічильника для його ініціалізації та counter-increment для збільшення лічильника. Необхідний набір властивостей для створення власної нумерації списку наведено нижче.
ol { list-style-type: none; /* Забираємо вихідні маркери */
counter-reset: my-counter; /* Задаємо ім'я лічильника */
}
li::before { content: counter(my-counter); /* Виводимо число */
counter-increment: my-counter; /* Збільшуємо значення лічильника */
}Оскільки ми самі виводимо число, то можемо легко його стилізувати, змінивши колір, зробивши жирним, курсивним та ін. .
Приклад 1. Власна нумерація
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title> <style> ol { list-style-type: none; /* Забираємо вихідні маркери */
counter-reset: my-counter; /* Задаємо ім'я лічильника */
}
li::before { content: counter(my-counter); /* Виводимо число */
counter-increment: my-counter; /* Збільшуємо значення лічильника */
color: #ED1C24; /* Колір тексту */
font-weight: bold; /* Жирне зображення */
font-style: italic; /* Курсивне накреслення */
margin-right: 0.5em; /* Відстань від цифри до тексту */
}
</style>
</head>
<body> <ol> <li>Перший</li> <li>Другий</li> <li>Третій</li> <li>Четвертий</li>
</ol>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Вигляд власної нумерації списку