Используя следующий код HTML, добавьте к списку римскую нумерацию, чтобы получить результат, показанный на рис. 1.
<ol class="list-roman">
<li>Primus</li>
<li>Secundus</li>
<li>Tertius</li>
<li>Quartus</li>
<li>Quintus</li>
</ol>
Рис. 1
Обратите внимание, что нумерация красного цвета и с закрывающей круглой скобкой, а текст превращается в капитель.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
@counter-style my-roman {
system: extends upper-roman;
suffix: ')';
}
.list-roman {
list-style: my-roman;
font-variant-caps: small-caps;
& > li {
padding-left: 0.5em;
}
& > li::marker {
color: red;
}
}
</style>
</head>
<body>
<ol class="list-roman">
<li>Primus</li>
<li>Secundus</li>
<li>Tertius</li>
<li>Quartus</li>
<li>Quintus</li>
</ol>
</body>
</html>