how to connect circles with lines without overlapping

Question

How can i connect this circles with css (or js/jquery) so it can be responsive and lines not overlapping when screen is smaller. Also i have tried to but and line behind the whole container, but since my circles need to be transparent, the line is always behind circles:

This is the only way the line is not behind every circle. But i don't know how to make it not to overlap and i need my line go from one border to another border. Also when i reduce width the line overlaps and goes behind circle.

demo: http://codepen.io/riogrande/pen/jqVKBb

css:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.flex-container .flex-item {
  background: transparent;
  width: 50px;
  height: 50px;
  margin: 5px;
  line-height: 50px;
  color: #ffefbd;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  border: 6px solid #ffefbd;
  border-radius: 50%;
  position: relative;
}
.flex-container .flex-item:after {
  width: 100%;
  border-top: 6px solid #ffefbd;
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.flex-container .flex-item:before {
  width: 100%;
  border-top: 6px solid #ffefbd;
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.flex-container .flex-item:last-child:after {
  display: none;
}
.flex-container .flex-item:first-child:before {
  display: none;
}

html:

<ul class="flex-container space-between">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
</ul>

Answer 1

I came up with this solution using simple markup and CSS. The Codepen includes animation examples, in case this is a progress kind of thing.

Codepen: http://codepen.io/jpecor-pmi/pen/GZNPWO

HTML

<section id="circles">
    <div data-num="1"></div>
    <div data-num="2"></div>
    <div data-num="3"></div>
    <div data-num="4"></div>
    <div data-num="5"></div>
    <div data-num="6"></div>
    <div data-num="7"></div>
</section>

CSS

/*
  @circle-diameter: 50px;
  @circle-count: 7;
  @border-width: 6px;
  @border-color: #ffefbd;
*/

/* circle containers */

#circles > div {
    background: transparent;
    font-weight: bold;
    float: left;
    height: 50px; /* @circle-diameter */
    position: relative;
    width: calc((100% - 50px) / 6 - .1px); /* (100% - @circle-diameter) / (@circle-count - 1) - 0.1px for IE :( */
}

/* circle */

#circles > div::before {
    border: 6px solid #ffefbd; /* @border-thickness solid @border-color */
    border-radius: 25px; /* @circle-diameter / 2 */
    color: #ffefbd;
    content: attr(data-num); /* value from data-num attribute */
    display: block;
    float: left;
    font: 21px sans-serif;
    height: 50px; /* @circle-diameter */
    line-height: 38px;
    text-align: center;
    width: 50px; /* @circle-diameter */
}

/* line */

#circles > div::after {
    background: #ffefbd; /* @border-color */
    content: '';
    display: block;
    height: 6px; /* @border-thickness */
    position: absolute;
    right: -1px; /* removes gap between circle and line */
    top: calc(50% - 3px); /* 50% - (@border-thickness / 2) */
    width: calc(100% - 48px); /* 100% - (@circle-diameter - 2px) */
}

/* first circle */

#circles > div:first-child {
    width: 50px; /* @circle-diameter */
}

#circles > div:first-child::after {
    display: none; /* hide line for first circle */
}

/* reset */

#circles,
#circles > div,
#circles > div::before,
#circles > div::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Answer 2

Ok so I managed to do it with CSS only. The solution was to wrap circles into divs which have width of "100%/n" where "n" is number of circles you want to show. So you need to know how many are there. In my example there were 7 circles. Inside of those divs i put another div called circle. This div has style of circle and its position in center of parent div with margin: 0 auto;. With pseudo elements i created lines which needs to be very big (in lenght) so there wont be any holes. And then the overlapping is corrected with: position: relative; and overflow: hidden;. The circles are transparent but lines never cross to other div. Hacky but works.

Full code on: http://codepen.io/riogrande/pen/reWQeK

css:

* {
  box-sizing: border-box;
}

.progress {
  .sevent{
    width: (100/7) * 1%;
    text-align: center;
    float: left;
    background:lightblue;
    position: relative;
    overflow: hidden;
    .circle {
      width: 60px;
      height:60px;
      margin: 0 auto;
      border: 6px solid red;
      border-radius:50%;
      position: relative;
      &:before {
        content: "";
        width: 300%;
        border-top: 6px solid red;
        position: absolute;
        right: 100%;
        top: 50%;
        transform:translateY(-50%);
      }
      &:after {
        content: "";
        width: 300%;
        border-top: 6px solid red;
        position: absolute;
        left: 100%;
        top: 50%;
        transform:translateY(-50%);
      }
    }
    &:last-child {
      .circle {
        &:after {
          display: none;
        }
      }
    }
    &:first-child {
      .circle {
        &:before {
          display: none;
        }
      }
    }
  }
}

HTML:

<div class="progress">

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

  <div class="sevent">
    <div class="circle">
      1
    </div>
  </div>

</div>