Having multiple images "linked" together with an horizontal line in HTML/CSS-ThrowExceptions

Exception or error:

I have absolutely no idea how to formulate what I am looking for correctly to get meaningful results from a search engine. So please give me directions.

In HTML, using bootstrap 4 or pure CSS/JS, I want to put multiple clicable images on the same line a “link” them together with an horizontal line. Here is a screenshot of the desired result:

enter image description here

I tried to get something done with hr and modified css with this tag, but I can’t even find a way to align the hr and the img tags.

How to solve:

You can play around with absolutely positioned images on a div with a background-color of gray, to achieve the desired result.

Run the snippet I have provided to see the idea of how it can be done, using CSS.

img{
  height: 30px; 
  width: 30px; 
  position: absolute; 
  top: 0; 
  left: 10px; 
  transform: translate(-50%, -50%);
}
.line{
  position: relative; 
  width: 500px; 
  height: 5px; 
  border-radius: 10px; 
  background-color: gray;
}
.container{
  margin-top:50px; 
  height: 5px;
}
    <div class="container" style="">
      <div class="line">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/480px-Infobox_info_icon.svg.png">
      </div>
    </div>

Note that the image background is transparent, that’s why you are seeing the line behind it.

Leave a Reply

Your email address will not be published. Required fields are marked *