Як зробити нумерацію кириличними літерами?

9 червня 2022 р.284

У CSS немає нумерації з російськими літерами, тому цю нумерацію доведеться робити самостійно через стилі. Для цього спочатку створюємо звичайний нумерований список через <ol>. Додавання літер здійснюється за допомогою псевдоелемента ::before та властивості content. Оскільки в кожному рядку має бути своя літера, використовуємо псевдоклас :nth-child(1), де у дужках пишеться номер літери. Першою буквою, природно, йде А, другий — Б, третьої — В і т.д. Весь цей набір додається до селектора li наступним чином.

li:nth-child(1)::before { content: 'а.'; } 
li:nth-child(2)::before { content: 'б.'; } 
li:nth-child(3)::before { content: 'в.'; }

Тут після кожної літери йде точка, всі літери малі. Ви можете визначити свій вид нумерації списку, наприклад вона може містити великі літери з точкою, з однією або двома дужками або тільки літери. На відміну від стандартної нумерації, ми тут вільні робити що завгодно. Списку з десяти літер має вистачити практично для всіх ситуацій, але якщо цього раптово виявиться мало, нічого не заважає розширити наш список, включивши в нього хоч усі літери російського алфавіту. , колір та інші параметри (приклад 1).

Приклад 1. Список з російськими літерами

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title> <style> ol { list-style-type: none; /* Ховаємо вихідну нумерацію */
} 
li::before { margin-right: 5px; /* Відстань від літери до тексту */
} 
li:nth-child(1)::before { content: 'а)'; } 
li:nth-child(2)::before { content: 'б)'; } 
li:nth-child(3)::before { content: 'в)'; } 
li:nth-child(4)::before { content: 'г)'; } 
li:nth-child(5)::before { content: 'д)'; } 
li:nth-child(6)::before { content: 'е)'; } 
li:nth-child(7)::before { content: 'ё)'; } 
li:nth-child(8)::before { content: 'ж)'; } 
li:nth-child(9)::before { content: 'з)'; } 
li:nth-child(10)::before { content: 'і)'; }
</style>
</head>
<body> <ol> <li>Борщ</li> <li>Котлети зі щуки</li> <li>Кулеб'яка</li> <li>Гри у сметані</li> <li>Млинці з ікрою</li> <li>Квас</li>
</ol>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Російські літери у списку

Мал. 1. Російські літери у списку