Add responsive Horizontal line after image using css - html

Question

Want to add horizontal line after image and it should be responsive.Right now it has 5 images in future i can add 6th image dynamically.So lines should be responsive to take 6th image.
Sample Of Image:
a {
display: block;
text-align: center;
position: relative;
}
a:after {
content: "";
width: 80%;
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: green;
}
img{
width: 50px;
height: 50px;
border-radius: 50%
}
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>

Answer 1

a {
display: block;
text-align: center;
position: relative;
}
hr {
border: 1px solid green;
width: 100%;
}
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
<hr>
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
<hr>

Answer 2

Your code doesn't work because you've set the <a> tag to display: block; which means that it occupies the entire line. This means that the line you've added will be 80% of the available space for the <a> tag.
If possible, consider adding an inline wrapper <div> and attach your line to that instead.
.link-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.link-wrapper:after {
content: "";
position: absolute;
top: 50%;
z-index: -1;
left: 0;
height: 1px;
width: 100%;
background: green;
}
.link-wrapper a:not(:last-child) {
margin-right: 2em;
}
.link-wrapper img {
display: block
}
<div class="link-wrapper">
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
</div>

Answer 3

Well it depends but something like this could do the job.
.bar {
position: relative;
height: 50px;
display: flex;
justify-content: space-between;
}
.bar:before {
content: "";
display: block;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
height: 1px;
background-color: green;
}
.image-wrapper {
position: relative;
}
.image-wrapper img {
width: 50px;
border-radius: 50%;
}
#media (max-width: 425px) {
.bar {
flex-direction: column;
height: auto;
align-items: center;
}
.bar:before {
width: 1px;
top: 0;
bottom: 0;
transform: none;
height: 90%;
}
.image-wrapper {
margin-bottom: 10px;
}
}
<div class="bar">
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
</div>

Answer 4

to add new line here :
add a new div
adjust the left property for the elements between start and end to fit all ... I give 2st 30% and 3rd 60% because I have 2 element ... so when you add new on decrease this.
finally I added background to all from .tline div for demo but you can specify a new background to each div
body {
padding-top: 100px;
}
.tline {
border-top: 2px solid gray;
position: relative;
}
.tline div {
display: inline-block;
width: 50px;
height: 50px;
border: px solid;
position: absolute;
border-radius: 35px;
text-align: center;
top: -25px;
background: url("https://www.w3schools.com/w3images/bandmember.jpg") center;
background-size: cover;
}
.tline div:nth-child(2) {
left: 30%;
}
.tline div:nth-child(3) {
left: 60%;
}
.tline div:last-child {
right: 0;
}
<div class="tline">
<div></div>
<div></div>
<div></div>
<div></div>
</div>