Finding a suitable way to format using flex and space-between proved challenging as the information on the width and position of each text seemed to get lost in the process.
Instead, I have devised a method utilizing inline-blocks, padding, and margins.
The trick here is to create the inter-text lines as a continuous line, with each text element 'blanking out' portions of it to the left and right using padding and background color. This method ensures that the texts are evenly spaced regardless of their width.
This code snippet allows you to adjust 3 variables to customize the line width, gap between text and line, and the number of items in the progress bar, giving you control over the spacing.
The end result is responsive, meaning that longer texts will wrap onto multiple lines if needed while keeping the inter-text line centered among the texts.
.progress-bar {
width: 100%;
position: relative;
margin-top: 50px;
background-image: linear-gradient(black, black);
background-size: 100% 2px;
background-position: 0 calc(50% - 1px);
background-repeat: no-repeat no-repeat;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* alter these to suit your use-case */
--lineW: 6%;
/* width of the lines between texts */
--gapW: 3%;
/* width of the gap between text and line */
--n: 4;
/* number of items in the progress bar */
}
p {
display: inline-block;
position: relative;
background: white;
text-align: center;
padding: 0 var(--gapW);
margin: 0 calc(var(--lineW) / 2);
max-width: calc((100% - (var(--n) * (var(--gapW) + var(--lineW)))) / var(--n));
}
p:first-child::before,
p:last-child::after {
content: '';
display: inline-block;
margin-right: 0;
position: absolute;
width: 100vw;
background: white;
z-index: 1;
height: 100%;
}
p:first-child::before {
right: 100%;
}
p:last-child::after {
left: 100%;
}
<div class="progress-bar">
<p>text one</p>
<p>text two</p>
<p>text three is noticeably wider</p>
<p>text four</p>
</div>