https://i.sstatic.net/zBXre.png
Looking for an image like this one, with horizontal scrolling navigation buttons to dynamically update the list. I have included CSS and HTML code below. The task should be accomplished using only CSS, but JavaScript can be used for the navigation icons. Additionally, the text within the <li> elements should not overlap even if it is lengthy.
.timeline {
white-space: nowrap;
overflow-x: hidden;
}
.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #e1e2e3;
}
.timeline ol li:last-child {
width: 280px;
}
.timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #e1e2e3;
}<div class="timeline">
<ol>
<li>abc</li>
<li>hello welcome</li>
<li>cool summer</li>
<li>hi there</li>
<li>whats up</li>
</ol>
</div>