HTML-список с нумерацией русскими буквами на CSS

Для того, чтобы сделать нумерацию HTML-списка кириллицей (русскими буквами), воспользуемся псевдоклассом CSS :nth-child.

Пример

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML-список с нумерацией русскими буквами на CSS</title>
		<style>
			ul.cyr {list-style: none; padding-left: 0;}
			.cyr>li:nth-child(1)::before {content: 'а) ';}
			.cyr>li:nth-child(2)::before {content: 'б) ';}
			.cyr>li:nth-child(3)::before {content: 'в) ';}
			.cyr>li:nth-child(4)::before {content: 'г) ';}
			.cyr>li:nth-child(5)::before {content: 'д) ';}
			.cyr>li:nth-child(6)::before {content: 'е) ';}
			.cyr>li:nth-child(7)::before {content: 'ё) ';}
			.cyr>li:nth-child(8)::before {content: 'ж) ';}
			.cyr>li:nth-child(9)::before {content: 'з) ';}
			.cyr>li:nth-child(10)::before {content: 'и) ';}
			.cyr>li:nth-child(11)::before {content: 'й) ';}
			.cyr>li:nth-child(12)::before {content: 'к) ';}
			.cyr>li:nth-child(13)::before {content: 'л) ';}
			.cyr>li:nth-child(14)::before {content: 'м) ';}
			.cyr>li:nth-child(15)::before {content: 'н) ';}
			.cyr>li:nth-child(16)::before {content: 'о) ';}
			.cyr>li:nth-child(17)::before {content: 'п) ';}
			.cyr>li:nth-child(18)::before {content: 'р) ';}
			.cyr>li:nth-child(19)::before {content: 'с) ';}
			.cyr>li:nth-child(20)::before {content: 'т) ';}
			.cyr>li:nth-child(21)::before {content: 'у) ';}
			.cyr>li:nth-child(22)::before {content: 'ф) ';}
			.cyr>li:nth-child(23)::before {content: 'х) ';}
			.cyr>li:nth-child(24)::before {content: 'ц) ';}
			.cyr>li:nth-child(25)::before {content: 'ч) ';}
			.cyr>li:nth-child(26)::before {content: 'ш) ';}
			.cyr>li:nth-child(27)::before {content: 'щ) ';}
			.cyr>li:nth-child(28)::before {content: 'ъ) ';}
			.cyr>li:nth-child(29)::before {content: 'ы) ';}
			.cyr>li:nth-child(30)::before {content: 'ь) ';}
			.cyr>li:nth-child(31)::before {content: 'э) ';}
			.cyr>li:nth-child(32)::before {content: 'ю) ';}
			.cyr>li:nth-child(33)::before {content: 'я) ';}
		</style>
	</head>
	<body>
		<h1>HTML-список с нумерацией русскими буквами на CSS</h1>
		<ul class="cyr">
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</body>
</html>

Так как в файле стилей будут использоваться символы русского алфавита, то нужно обязательно задать ему кодировку UTF-8, прописав первой строкой следующий код:

@charset "utf-8";

Проверено в браузерах Google Chrome, Internet Explorer, Mozilla Firefox, Opera Next, Opera Presto, Safari.

27.11.2014