Creating connected circles

Question

I need to create this image:

It contains circles attached with lines. I drew in the red boxes to show that they are divs because when it's displayed on mobile it should look like this:

I've tried doing what this post says but it doesn't work for me since the li's woudln't be in the same div.

This is my code:

.steps {
  max-width: 1170px;
  margin: auto;
  overflow: auto;
}
.step-1,
.step-2,
.step-3,
.step-4 {
  width: 25%;
  float: left;
}

<div class="steps">
  <div class="step-1">
    <div class="step-image">
      <img src="step1.jpg">
    </div>
    <div class="step-title">Measure Your Space</div>
    <div class="step-number">1
    </div>
  </div>

  <div class="step-2">
    <div class="step-image">
      <img src="step2.jpg">
    </div>
    <div class="step-title">Your Kitchen is Designed</div>
    <div class="step-number">2</div>
  </div>

  <div class="step-3">
    <div class="step-image">
      <img src="step3.jpg">
    </div>
    <div class="step-title">Your Materials are Shipped</div>
    <div class="step-number">3</div>
  </div>

  <div class="step-4">
    <div class="step-image">
      <img src="step4.jpg">
    </div>
    <div class="step-title">Start contruction of your dream kitchen</div>
    <div class="step-number">4</div>
  </div>
</div>

How do I create the circles with lines connecting them?

Answer 1

Following solution is for version with lines.
To remove lines place content: none; under media-query.

section {
  display: inline-block;
  width: 25%;
  text-align: center;
}

div {
  margin: .5em;
  border: 1px solid red;
  padding: .5em;
  position: relative;
}

a {
  display: inline-block;
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
  background: silver;
}

a:before, a:after {
  content: "";
  position: absolute;
  border-top: 1px solid;
  margin-top: 1em;
  z-index: -1;
}

a:before {
  margin-left: -1px;
  left: -.5em;
  right: 50%;
}

a:after {
  margin-right: -1px;
  left: 50%;
  right: -.5em;
}

section:first-child a:before,
section:last-child a:after {
  content: none;
}

<main>
  <section>
    <div>
      <p>Some content</p>
      <a>1</a>
    </div>
  </section><section>
    <div>
      <p>Some content</p>
      <a>2</a>
    </div>
  </section><section>
    <div>
      <p>Some content</p>
      <a>3</a>
    </div>
  </section><section>
    <div>
      <p>Some content</p>
      <a>4</a>
    </div>
  </section>
</main>

Answer 2

Here is a sample, with a minimal markup, and for the marker and line the ::after and ::before pseudo element is used (starting from the 2:nd position)

div.connected {
  counter-reset: num;
}
div.connected div {
  float: left;
  width: calc(25% - 22px);
  position: relative;
  text-align: center;
  margin: 0 10px;
  padding: 80px 0 10px 0;
  border: 1px solid #eee;
  background: url(http://placehold.it/60/f00) no-repeat top 10px center;
}
div.connected div::after {
  display: block;
  counter-increment: num;
  content: counter(num);
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 50%;
  border: 1px solid gray;
  margin: 0 auto;
}
div.connected div ~ div::before {
  content: '';
  position: absolute;
  width: calc(100% - 1.5em + 22px);
  right: calc(50% + 0.75em);
  height: 1px;
  background-color: gray;
  bottom: calc(.75em + 10px);
  z-index: -1;
}
div.connected span {
  display: inline-block;
  padding-bottom: 10px;
}
@media screen and (max-width: 600px) {

  div.connected div {
    width: calc(50% - 22px);
  }
  div.connected div:nth-child(n+3) {
    margin-top: 20px;
  }
  div.connected div:nth-child(3)::before {
    display: none;
  }
  
}

<div class="connected">
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
</div>

---

Here is an updated version that solves the misalignment when an item have longer text

div.connected {
  display: flex;
  flex-wrap: wrap;
  counter-reset: num;
}
div.connected div {
  float: left;
  width: calc(25% - 22px);
  position: relative;
  text-align: center;
  margin: 0 10px;
  padding: 80px 0 10px 0;
  border: 1px solid #eee;
  background: url(http://placehold.it/60/f00) no-repeat top 10px center;
}
div.connected div::after {
  display: block;
  counter-increment: num;
  content: counter(num);
  position: absolute;
  left: calc(50% - 0.75em - 1px);
  bottom: 10px;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 50%;
  border: 1px solid gray;
}
div.connected div ~ div::before {
  content: '';
  position: absolute;
  width: calc(100% - 1.5em + 22px);
  right: calc(50% + 0.75em);
  height: 1px;
  background-color: gray;
  bottom: calc(.75em + 10px);
  z-index: -1;
}
div.connected span {
  display: inline-block;
  padding-bottom: 30px;
}
@media screen and (max-width: 600px) {

  div.connected div {
    width: calc(50% - 22px);
  }
  div.connected div:nth-child(n+3) {
    margin-top: 20px;
  }
  div.connected div:nth-child(3)::before {
    display: none;
  }
  
}

<div class="connected">
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some long long long text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
</div>

---

Updated, being asked how to move text below the circles, so here is one way (see notes in CSS)

Note, since absolute positioning is used for the connectors/circles, and as longer text can wrap, one might need to adjust the bottom distance (50px) using the existing @media query.

div.connected {
  display: flex;
  flex-wrap: wrap;
  counter-reset: num;
}

div.connected div {
  float: left;
  width: calc(25% - 22px);
  position: relative;
  text-align: center;
  margin: 0 10px;
  
  /* padding: 80px 0 10px 0;   changed  */
  padding: 120px 0 10px 0;
  
  border: 1px solid #eee;
  background: url(http://placehold.it/60/f00) no-repeat top 10px center;
}

div.connected div::after {
  display: block;
  counter-increment: num;
  content: counter(num);
  position: absolute;
  left: calc(50% - 0.75em - 1px);
  
  /* bottom: 10px;   changed  */
  bottom: 50px;

  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 50%;
  border: 1px solid gray;
}

div.connected div~div::before {
  content: '';
  position: absolute;
  width: calc(100% - 1.5em + 22px);
  right: calc(50% + 0.75em);
  height: 1px;
  background-color: gray;
  
  /* bottom: calc(.75em + 10px);   changed  */
  bottom: calc(.75em + 50px);
  
  z-index: -1;
}

div.connected span {
  display: inline-block;
}

@media screen and (max-width: 600px) {
  div.connected div {
    width: calc(50% - 22px);
  }
  div.connected div:nth-child(n+3) {
    margin-top: 20px;
  }
  div.connected div:nth-child(3)::before {
    display: none;
  }
}

<div class="connected">
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
  <div>
    <span>Some long long long text here</span>
  </div>
  <div>
    <span>Some text here</span>
  </div>
</div>