I have 3 images with same width and 1 image with slightly bigger width, and i want to show those images in a row, and between those images there's a connecting line horizontal in the middle, and one of the connecting line will have different color, roughly like this:
What i've done so far is i used <hr> as a connecting line but it seems not good looking enough, the connecting line not aligning vertical in the middle and when i tried to increase the font-size below each image it will make 2 row font-line not 1.
<style>
.rank-images .image-container{
width: 14%;
display: inline-block;
}
.rank-images .image-container.rank-3{
width: 18%;
}
div.seperator{
display: inline-block;
width: 12%;
}
div.seperator hr{
border-bottom: 3px solid #F7D85A;
}
div.seperator.third-seperator hr{
border-bottom: 3px solid #333;
}
.rank-images .image-container p{
margin-top: 15px;
text-align: center;
}
.rank-images .image-container p span{
font-weight: bold;
font-size: 0.73em;
color: #333;
}
</style>
<div class="rank-images">
<div class="image-container rank-1">
<img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
<p>
<span>Less than 2000 points</span>
</p>
</div>
<div class="seperator first-seperator">
<hr>
</div>
<div class="image-container rank-2">
<img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
<p>
<span>2001 - 5000 points</span>
</p>
</div>
<div class="seperator second-seperator">
<hr>
</div>
<div class="image-container rank-3">
<img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
<p>
<span>5001 - 12000 points</span>
</p>
</div>
<div class="seperator third-seperator">
<hr>
</div>
<div class="image-container rank-4">
<img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
<p>
<span>More than 12000 points</span>
</p>
</div>
</div>
