Creating CSS3 Circles connected by lines

Question

I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look li

Answer 1

Well, it's a ton of markup, but you could do something like this:

Use display: table-cell; as it will automatically adjust the widths of items to fill spaces.

Then, have a set of circle elements, and a set of line elements. The line elements just have a bottom border on them, and the circle elements are just relatively positioned downwards to align with the line.

Note that the circles need to have an extra container, otherwise table-cell will stretch all the circles to the same height, and you don't want that that. This will require you to set the width of those containers to be 1px, which will force it to the size of it's child.

Check out this demo:

http://jsfiddle.net/Sjdm4/

Answer 2

I used Bootstrap 4 and FontAwesome to make my version of this.

Here's the code pen: [a link]https://codepen.io/tr4c355/pen/roBjWV

HTML & CSS:

<style>
.line-btw { 
  height:3px;
  width:100px;
  background-color: orange;
}
</style>

<div class="fa-stack fa-lg text-center">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div class=""><b>1</b></div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div style=""><b>2</b></div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <div class=""><b>3</b></div>
</div>