Positioning points along a line - html

Question

I'm trying to build the following component with CSS, but I can't get the first and last point to sit flush against the ends of the line.
It must be able to support an arbitrary number of points (between 1 and 4) and I can't rely on flexbox being there either.
I have a React component that's generating HTML that looks like this:
<div class="row">
<div class="col first" style="width:33%">
<div class="marker complete"></div>
<label>Feedback</label>
</div>
<div class="col" style="width:33%">
<div class="marker partial"></div>
<label>Observation</label>
</div>
<div class="col last" style="width:33%">
<div class="marker review"></div>
<label>Documentation</label>
</div>
</div>
The JavaScript calculates the column sizes before rendering and in my codepen implementation, I'm just centering all the content in each column.
I can sort of hack a solution by using the first and last classes to relatively position the end items, but invariably when the screen size changes, I start to get the edges of the line poking out from behind the points.
Does anyone know of a more sensible layout to start building this with?

Answer 1

My idea would be to set row as display: table-row, and then use a pseudo element to generate the horizontal bar. However, you run into the issue that you cannot know with CSS and HTML alone what the position of the first and last circle is relative to the size of the container. Therefore, it is not possible to use a full width item.
Another approach is using the labels as root items for the pseudo elements. They are always the full width of the column, so they give a nice indication what needs to be used.
The following proposed solution should work with IE9. The only special thing that is used is calc and after. (Instead of calc you can also use a transform: translate if you want.)
The basic idea is to use a table row, which would automatically scale nicely, and then use the labels as roots on which you can build the progress bar.
label:after {
content: "";
height: .5em;
background: #e2e2e2;
width: 100%;
position: absolute;
top: calc((100% - 1.5em) / 2); /* -1 to compensate text, -.5 for height bar */
left: 0;
z-index: -1;
}
.first label:after, .last label:after {
width: 50%;
}
.first label:after {
left: auto;
right: 0;
}
.single label:after {content: none;}

Answer 2

Here ya go. I assume this is what you are looking for.
<div class="row">
<div class="col" style="width:33%">
<div class="marker marker1 complete"></div>
<label>Feedback</label>
</div>
<div class="col2" style="width:33%">
<div class="marker marker2 partial"></div>
<label>Observation</label>
</div>
<div class="col3" style="width:33%">
<div class="marker marker3 review"></div>
<label>Documentation</label>
</div>
</div>
https://jsfiddle.net/norcaljohnny/e6nm2rbv/
*if JS was/is allowed I can put some conditions in it based on number and word length and adjust marker indentions.
Basically I used display blocks, margins and secondary marker classes for each block.

Answer 3

.row {
display: table;
margin: 0 auto;
position: relative;
width: 100%;
}
.col {
display: table-cell;
width: 33%;
text-align: center;
}
.marker {
width: 30px;
height: 30px;
background-color: lightgray;
border-radius: 30px;
margin: 0 auto;
}
.complete {
background-color: blue;
}
.partial {
background-color: blue;
box-sizing: border-box;
border: 8px solid lightgray;
}
.review {
background-color: lightblue;
}
.col:not(:last-child) > .marker:after {
content: '';
display: inline-block;
width: 67%;
height: 0;
border: 3px solid lightgray;
position: absolute;
left: 16.5%;
top: 12.5px;
z-index: -10;
}
/* ------------------------------------------- */
.wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 0 100px;
}
.point {
height: 30px;
background-color: lightgray;
border-radius: 30px;
flex: 0 0 30px;
position: relative;
}
.line {
height: 0;
border: 3px solid lightgray;
flex: 1 0;
}
.blue {
background-color: blue;
}
.lightblue {
background-color: lightblue;
}
.border {
background-color: lightgray;
background-image: radial-gradient(at center center, blue 0, blue 8px, transparent 8px, transparent 100%);
}
.point label {
position: absolute;
left: -50%;
top: 100%;
text-align: center;
}
<h1>Non flex</h1>
<div class="row">
<div class="col first">
<div class="marker complete"></div>
<label>Feedback</label>
</div>
<div class="col">
<div class="marker partial"></div>
<label>Observation</label>
</div>
<div class="col last">
<div class="marker review"></div>
<label>Documentation</label>
</div>
</div>
<h1>Flex</h1>
<div class="wrapper">
<div class="point blue">
<label>Feedback</label>
</div>
<div class="line"></div>
<div class="point blue border">
<label>Observation</label>
</div>
<div class="line"></div>
<div class="point lightblue">
<label>Documentation</label>
</div>
</div>