How to create lines between elements- CSS/HTML

Question

I have 4 circles and I want to show lines between these circles, just a way to show that the circles are connected to each other.

.circle {
    height: 30px;
    width: 30px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-left: 40px;
  }

<div>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
</div>

I tried adding <hr/> after every <span> element, however, this is creating lines on next line, any ideas?

fiddle: https://jsfiddle.net/9qyvzehw/

Thanks!

Check [this](https://stackoverflow.com/questions/55506642/centering-libefore-content-with-li). — N'Bayramberdiyev, Apr 14 '19 at 07:40
I was writing an answer when it got closed. I'd do this: https://jsfiddle.net/sheriffderek/dzagnwfr/ . - or https://jsfiddle.net/sheriffderek/k7amrvy3/ — sheriffderek, Apr 14 '19 at 07:56
As far as I understand you want a horizontal line through circles. Here is a [fiddle](https://jsfiddle.net/5w4mzfun/) if it can help you. — N'Bayramberdiyev, Apr 14 '19 at 07:59
According to your requirement I have done that please go through this link https://codepen.io/rajeshkumarsah/pen/pBWzwj — codeuix, Apr 14 '19 at 08:04

score 2 · Accepted Answer · answered Apr 14 '19 at 08:02

Try this one:

.circle {
  height: 30px;
  width: 30px;
  background-color: #bbb;
  border-radius: 50%;
  float: left;
  margin: 0px;
  padding: 0px;
}
.line{
  height: 2px;
  width: 40px;
  background-color: #bbb;
  float: left;
  margin: 14px 0px;
  padding: 0px;
}
.clear{
  clear: both;
}

<div>
  <span class="circle"></span>
  <span class="line"></span>
  <span class="circle"></span>
  <span class="line"></span>
  <span class="circle"></span>
  <span class="line"></span>
  <span class="circle"></span>
  <span class="clear"></span>
</div>

How to create lines between elements- CSS/HTML

1 Answers1