Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » » Нумерованный список с номерами в кружочках

Нумерованный список с номерами в кружочках

galina2601 17-01-2021, 16:13 171 Уроки по 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;
}

Сам список может быть любым.
К примеру, вот таким:
<ol>
  <li>Александр Сергеевич Пушкин</li>
  <li>Сергей Александрович Есенин</li>
  <li>Владимир Владимирович Маяковский</li>
  <li>Анна Андреевна Ахматова</li>
</ol>

И вот результат:
  1. Александр Сергеевич Пушкин
  2. Сергей Александрович Есенин
  3. Владимир Владимирович Маяковский
  4. Анна Андреевна Ахматова

Конечно, такие номера лучше использовать для списков, каждый пункт которых занимает несколько строчек. ну, или несколько уменьшить расстояние от чисел до окружности, чтобы пункт меню смотрелся по центру.

Похожие новости

  • Красивые нумерованные списки с помощью CSS
  • Список с анимированным маркером на CSS
  • Еще один красивый список с помощью CSS
  • Красивый список с помощью CSS
  • Как сделать красивый маркер в списке

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив