How to overlap elements in CSS? - html

Question

I have this stepper attached as an example in fiddle.
.stepper-wrapper {
font-family: Arial;
margin-top: 50px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.stepper-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.stepper-item::before {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 9px;
left: -50%;
z-index: 2;
}
.stepper-item::after {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 9px;
left: 50%;
z-index: 2;
}
.stepper-item .step-counter {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ccc;
margin-bottom: 12px;
}
.stepper-item.active {
font-weight: bold;
}
.stepper-item.active .step-counter {
background-color: red;
border: 1px solid red;
width: 15px;
height: 15px;
background-clip: content-box;
padding: 3px;
top: -2px;
margin-bottom: 8px;
z-index: 3;
}
.stepper-item.completed .step-counter {
background-color: red;
}
.stepper-item.completed::after {
position: absolute;
content: "";
border-bottom: 2px solid red;
width: 100%;
top: 9px;
left: 50%;
z-index: 3;
}
.stepper-item:first-child::before {
content: none;
}
.stepper-item:last-child::after {
content: none;
}
<div class="stepper-wrapper">
<div class="stepper-item completed">
<div class="step-counter"></div>
<div class="step-name">First</div>
</div>
<div class="stepper-item completed">
<div class="step-counter"></div>
<div class="step-name">Second</div>
</div>
<div class="stepper-item active">
<div class="step-counter"></div>
<div class="step-name">Third</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">Forth</div>
</div>
</div>
But I don't know how to overlap this active element so that these left and right lines go until the first (outer) circle.
This part...
How to make this in CSS?
It should be something like this.

Answer 1

Our main goal here is to cover-up the space between the actual element and its border.
The space can be filled by an inset box-shadow.
It will hide all the content under it; just give the right amount of spread with zero blur :)
Just add this snippet to the element:
box-shadow: 0 0 0 3px white inset;
Here's the edited snippet
.stepper-wrapper {
font-family: Arial;
margin-top: 50px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.stepper-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.stepper-item::before {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 9px;
left: -50%;
z-index: 2;
}
.stepper-item::after {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 9px;
left: 50%;
z-index: 2;
}
.stepper-item .step-counter {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ccc;
margin-bottom: 12px;
}
.stepper-item.active {
font-weight: bold;
}
.stepper-item.active .step-counter {
background-color: red;
border: 1px solid red;
width: 15px;
height: 15px;
background-clip: content-box;
/* Here it is */
box-shadow: 0 0 0 3px white inset;
padding: 3px;
top: -2px;
margin-bottom: 8px;
z-index: 3;
}
.stepper-item.completed .step-counter {
background-color: red;
}
.stepper-item.completed::after {
position: absolute;
content: "";
border-bottom: 2px solid red;
width: 100%;
top: 9px;
left: 50%;
z-index: 3;
}
.stepper-item:first-child::before {
content: none;
}
.stepper-item:last-child::after {
content: none;
}
<div class="stepper-wrapper">
<div class="stepper-item completed">
<div class="step-counter"></div>
<div class="step-name">First</div>
</div>
<div class="stepper-item completed">
<div class="step-counter"></div>
<div class="step-name">Second</div>
</div>
<div class="stepper-item active">
<div class="step-counter"></div>
<div class="step-name">Third</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">Forth</div>
</div>
</div>

Answer 2

I found this one for your problem, I hope this helps you.
.stepper-item.active .step-counter::after {
position: absolute;
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
border: 3px solid white;
}