css how to make vertical timeline with dot between two points - css

Question

I would like to know the technique how to make vertical timeline with dot between two point as like as the picture.
Any sample code.
Regards.

Answer 1

Use background-image: radial-gradient create dotes and use "pseudo-element" add dotes and icon.
* {
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>