I'm struggling to generate images with dashes in between them while ensuring that each div only occupies the necessary space within the container. However, my attempts so far have resulted in all the divs taking up an equal amount of space, which is not intended for the last div. The issue arises when the width of the hr is set to 100%, causing it to disappear if the width of the div is not specified.
Any suggestions on how to resolve this?
Here's what I currently have:
https://i.sstatic.net/1yjfm.png
And here's the code snippet:
.hr {
border-top: 10px dashed black;
background-color:transparent;
.div2 {
align-items: center;
padding: 0;
flex-grow: 1;
margin-bottom: 0;
display: inline-flex;
}
.div1 {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
position: absolute;
display: flex;
}<div class="div1">
<div class="div2">
<img src="circle.svg">
<hr class="hr">
</div>
<div class="div2">
<img src="circle.svg">
<hr class="hr">
</div>
<div class="div2">
<img src="circle.svg">
<hr class="hr">
</div>
<div class="div2">
<img src="circle.svg">
</div>
</div>