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

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

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

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

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

galina2601 31-01-2021, 23:05 864 Уроки по CSS / Списки

Ну, что, еще один симпатичный нумерованный список.

На сей раз симпатичные кружочки, соединенные между собой полоской.
Список самый обычный. Оформляем его классическими тегами <ol> и <li>.
Ну и задаём вот такой стиль.

ol {
list-style-type: none;
counter-reset: num;
position: relative;
margin: 0 0 0 60px;
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:after {
content: counter(num);
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -45px;
width: 28px;
height: 28px;
line-height: 28px;
background: #fff;
color: #000;
text-align: center;
font-size: 18px;
border-radius: 50%;
border: 1px solid #ef6780;
}

/* Вертикальная линия */
ol:before {
content: '';
position: absolute;
top: 15px;
bottom: 15px;
left: -30px;
width: 1px;
border-left: 1px solid #ef6780;
}
/* Скрытие линии у последнего li */
ol li:last-child:before {
content: '';
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: -38px;
width: 28px;
background: #fff;
}

Алгоритм жарки яичницы

  1. Включаем плиту
  2. Ставим на огонь сковородку
  3. Кладём кусочек масла
  4. Разбиваем в сковородку 3 яйца
  5. Солим
  6. Ждем, пока пожарятся
  7. Выключаем плитку
  8. перекладываем яичницу на тарелку

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

  • Нумерованный список с номерами в кружочках
  • Красивые нумерованные списки с помощью 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
    Кликните на изображение чтобы обновить код, если он неразборчив