CSS border bottom only on one side - html

Question

I am trying to use the css border-bottom property with a circle in between. Something like this :
what I want
But, for the first and last circles I only want it to line to be inclusive within the borders but its extending to the ends like this.
result of what I tried with normal css
This is the css I used:
.horizontalLineComplete{
width: 100%;
border-bottom: 4px solid #26890D;
height:20px;
}
.horizontalLineCurrent{
width: 70%;
border-bottom: 4px solid #63666A;
height:20px;
}
I tried using the li:: before and ::after selector classes as well but that also hasn't worked it just shows up the lines between the circles but the colors I assign aren't working accurately. It takes black color by default like this: result for what I tried with selector classes
This is the css I gave:
li.circleComplete::before
{
content: "";
flex: 1 1;
border-bottom: 2px solid #26890D;
margin: auto;
}
li.circleComplete::after {
content: "";
flex: 1 1;
border-bottom: 2px solid #26890D;
margin: auto;
}
li.circleNext::before
{
content: "";
flex: 1 1;
border-bottom: 2px solid #63666A;
margin: auto;
}
li.circleNext::after {
content: "";
flex: 1 1;
border-bottom: 2px solid #63666A;
margin: auto;
}
Can someone help me out on how I can adjust this or let me know if I am making any mistakes in the code? I am using react and typescript for my front end with scss.

Answer 1

This is one of solution how to fix your code.
$('.active').html("&#10003");
$('#goNext').on('click', function() {
$('ul>li.active').removeClass('active').next('li').addClass('active');
$("ul>li.active").html("&#10003")
});
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: #45ad66;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before{
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: #45ad66;
z-index: -1;
transition: all 1s;
}
li:first-child::before {
display: none;
}
.active {
background: #3f995b;
transition: all 1s;
}
.active ~ li {
background: gray;
}
.active ~ li::before {
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<button id="goNext">
Go to next
</button>
UPDATED code

Answer 2

I find it easier to put the central line as a background image (via linear-gradient) on the ul element itself.
This snippet sets the ul to display inline-flex and gets the circles (the li elements) spaced out evenly with the first at the left side and the last at the right side by using the space-between justification property.
This way you don't have to do lots of positioning.
The tick is put on via a content in a pseudo element for each li as I assume it is just for decoration rather than as actual content.
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: inline-flex;
width: 100%;
background-image: linear-gradient(#45ad66, #45ad66);
background-size: 100% 2px;
background-position: center center;
background-repeat: no-repeat;
justify-content: space-between;
}
li::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
content: '✔';
color: white;
font-size: 3vmin;
}
li {
display: inline-block;
position: relative;
background-color: #45ad66;
width: 6vmin;
height: 6vmin;
border-radius: 50%;
transition: all 1s;
}
li.active,
li:hover {
background-color: #3f995b;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Note: dimensions are in terms of vmin so that the whole thing is responsive but of course you are free to change those if required.
Just so you can see the 'active' effect transitioning I've put the active color as the color for a hover on an li element as well. Also moved the transition to the element itself so the color transitions both in and out.