Как сделать подобный таймлайн?

Question

[Руслан Дасаев]

Нужно сверстать таймлайн:


Как вертикально спозиционировать пойнты в нем? Добавляя их как картинку через свойство content не получается прописать позицию. Понятно, что есть и принципиально другие способы сверстать его, но интересен именно этот. Вот код https://codepen.io/rusl10/pen/pxKYPY

Comments

[Владимир Коротенко]

.timeline li{

font-size: 20px;
line-height: 1.85;
color: #0579c0;
background: url(a.radikal.ru/a15/1810/af/c8cfd78c64f1.png) no-repeat left center; /* <-- change `left` & `top` too for extra control */
padding: 0px 0px 0px 28px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Посмотрите готовые сниппеты:
https://bootsnipp.com/snippets/featured/simple-ver...

https://bootsnipp.com/snippets/featured/timeline-s...

https://bootsnipp.com/snippets/featured/single-col...

https://bootsnipp.com/snippets/featured/timeline

https://bootsnipp.com/snippets/featured/timeline-dotted

Answer 2

[Дмитрий Гребенщиков]

Делайте через ul. Так намного проще.

Answer 3

[igumenov]

Я бы сделал так:
Основной фон полосы вынес бы выше к timeline__body так как полоса подстроится под кол-во элементов внутри,
а точки уже позиционировал относительно timeline__item {
top: 50%;
transform: translateY(-50%)
} только не картинкой а через обычный border сделать