CSS, как сделать вертикальную шкалу времени с точкой между двумя точками

Question

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

Любой пример кода.

С уважением.

Answer 1

Использовать background-image: радиальный градиент создавать точки и использовать "псевдоэлемент" добавлять точки и иконки.

* {
  box-sizing: border-box;
}

.items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.items li {
  position: relative;
  padding: 0 10px 20px 40px;
}

.items li:after {
  content: "";
  position: absolute;
  background: #02a4ce;
  width: 16px;
  height: 16px;
  left: 6px;
  top: 2px;
  border-radius: 50%;
}

.items li:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 20px;
  left: 8px;
  top: 0;
  background-image: radial-gradient(circle at 2.5px, #ccc 1.25px, rgba(255, 255, 255, 0) 2.5px);
  background-position: top, right, bottom, left;
  background-size: 15px 15px;
  background-repeat: repeat-y;
}

.items .end:before {
  display: none;
}

.items .end:after {
  background: #ec6352;
}

<ul class="items">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  </li>
  <li>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  </li>
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </li>
  <li class="end">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </li>
</ul>