Нумерованный список с номерами в кружочках
galina2601 17-01-2021, 16:13 1 110 Уроки по CSS / СпискиИ еще один вариант красивого нумерованного списка с помощью CSS.
Номера у пунктов меню взяты в кружочки. Естественно, цвет и размер можно менять.
Вот так описываются стили:
ol {
list-style-type: none;
counter-reset: num;
margin: 0 0 0 45px;
padding: 15px 0 5px 0;
font-size: 16px;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
line-height: 1.4;
}
ol li:before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -38px;
width: 25px;
height: 25px;
background: #fff;
color: #000;
text-align: center;
line-height: 25px;
font-size: 16px;
border-radius: 50%;
border: 2px solid #3bb641;
}
list-style-type: none;
counter-reset: num;
margin: 0 0 0 45px;
padding: 15px 0 5px 0;
font-size: 16px;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
line-height: 1.4;
}
ol li:before {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -38px;
width: 25px;
height: 25px;
background: #fff;
color: #000;
text-align: center;
line-height: 25px;
font-size: 16px;
border-radius: 50%;
border: 2px solid #3bb641;
}
Сам список может быть любым.
К примеру, вот таким:
<ol>
<li>Александр Сергеевич Пушкин</li>
<li>Сергей Александрович Есенин</li>
<li>Владимир Владимирович Маяковский</li>
<li>Анна Андреевна Ахматова</li>
</ol>
<li>Александр Сергеевич Пушкин</li>
<li>Сергей Александрович Есенин</li>
<li>Владимир Владимирович Маяковский</li>
<li>Анна Андреевна Ахматова</li>
</ol>
И вот результат:
- Александр Сергеевич Пушкин
- Сергей Александрович Есенин
- Владимир Владимирович Маяковский
- Анна Андреевна Ахматова
Конечно, такие номера лучше использовать для списков, каждый пункт которых занимает несколько строчек. ну, или несколько уменьшить расстояние от чисел до окружности, чтобы пункт меню смотрелся по центру.