How do I to create a bread crumbs navigation like this? - css

Question

I'm trying to wrap my head around making a breadcrumbs navigation that will look sort of like this.
I want the circle to be centered beneath the text. I want the text to stay within the container where I place the breadscrumbs. E.g. I can't use position absolute to place them relatively to the circle, since they would potentially overflow the container I put them in.
This is where I'm currently at... https://jsfiddle.net/04pts9ey/2/
body {
background: gray;
}
.container {
max-width: 80%;
margin: auto;
background: #f6f6f6;
padding: 40px;
}
.page {
width: 100%;
height: 400px;
border: 1px solid black;
margin-top: 24px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
margin-bottom: 8px;
}
.circle {
background: purple;
width: 18px;
height: 18px;
border-radius: 50%;
position: relative;
}
.step:not(:last-child) .circle:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: 1px;
width: 100px;
right: 100px;
background: green;
}
<div class="container">
<div class="wrapper">
<span class="step">
<span class="text">Short</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Long title here</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Medium title</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Another title</span>
<span class="circle"></span>
</span>
</div>
<div class="page"></div>
</div>
My main issue seems to be that I can't align the circle and text together, since putting them in a div together, makes it hard for me to draw the lines between the circles.

Answer 1

Something like this ?
.wrapper {
display: flex;
border: 1px solid;
}
.step {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.text {
margin-bottom: 8px;
}
.circle {
background: orange;
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: auto;
}
.step:not(:last-child)>.circle:before {
content: "";
position: absolute;
height: 2px;
left: 0;
right: 0;
bottom: 10px;
transform: translate(50%, 50%);
background: orange;
}
/* Styles below are not needed, Used for illustration */
.wrapper {
resize: horizontal;
overflow: auto;
}
<h3>Bottom right corner to resize for responsiveness</h3>
<div class="wrapper">
<span class="step">
<span class="text">Short</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Long title here</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Medium title</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Another title</span>
<span class="circle"></span>
</span>
</div>
The code is self explanatory nevertheless if you have any question please leave a comment, The only significant changes i made are:
moved the lines from being relative to .circle to .step to have more control over the width.
margin-top:auto on the .circle to ensure it's always on be bottom in case text overflows.
Made .step equal width using flex: 1 1 0; So the lines between the circle have a unified offset.