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> 

Answer 3

Given the markup you have, one simple solution would be to align the horizontal line (the :after pseudo-element of .step-number ) relative to .step-# div. Here's how:

.step-1,
.step-2,
.step-3,
.step-4 {
  ...
  /* Set position of step divs to be relative. */
  position: relative;
}

.step-number:after {
  /* Absolutely position this to the bottom center of step-#.
     15px is the radius of step-number.
     A 100% width, and a 50% left expands the line's
     length to the center of the next step-#. */
  position: absolute;
  left: 50%;
  bottom: 15px;
  margin-left: 15px;

  ...
}

.step-number {
  /* A fixed width of 30px allows us to correctly position the line. */
  border-radius: 20px;
  width: 30px;
  height: 30px;
  ...
}

 .step-number { border-radius: 20px; width: 30px; height: 30px; line-height: 30px; border: 1px #AAA solid; text-align: center; display: inline-block; background-color: #FFF; } /* Absolutely position this to the bottom center of step-#. 15px is the radius of step-number. A 100% width, and a 50% left expands the line's length to the center of the next step-#. */ .step-number:after { content: ' '; position: absolute; left: 50%; margin-left: 15px; bottom: 15px; width: 100%; height: 1px; background-color: #AAA; } /* Hide the line after the last step */ .step-4 .step-number:after { display: none; } .steps { max-width: 1170px; margin: auto; overflow: auto; } .step-title { min-height: 80px; } .step-1, .step-2, .step-3, .step-4 { width: 22%; vertical-align: top; display: inline-block; text-align: center; /* Set position of step divs to be relative. */ position: relative; border: 1px #FAA solid; } @media screen and (max-width: 400px) { .step-number:after { content: none; display: none; } } 

 <div class="steps"> <div class="step-1"> <div class="step-image"> <img src="https://placehold.it/100x100"> </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="https://placehold.it/100x100"> </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="https://placehold.it/100x100"> </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="https://placehold.it/100x100"> </div> <div class="step-title">Start contruction of your dream kitchen</div> <div class="step-number">4</div> </div> </div> 

To keep up with small screens, you can add a media query to hide the horizontal lines, once the .step-# s span to multiple rows.

@media screen and (max-width: 400px) {
  .step-number:after {
    content: none;
    display: none;
  }
}

Answer 4

 .steps { max-width: 1170px; margin: auto; overflow: auto; box-sizing:border-box; } .step-1, .step-2, .step-3, .step-4 { width: 90px; height:200px; float: left; border:2px solid #ff0000; box-sizing:border-box; text-align:center; position:relative; margin:5px; z-index:999; } img{ width:50%; height:50px; margin:auto; margin-top:10px } .step-number{ border-radius: 50%; border: 1px solid #000; position: absolute; bottom: 20px; right: 43%; padding: 4px; z-index:999; } hr{ position: absolute; width: 282px; height: 1px; right: 53px; bottom: 23px; z-index: 990; } 

 <div class="steps"> <div class="step-1"> <div class="step-image"> <img src="https://i.stack.imgur.com/ElI1w.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="https://i.stack.imgur.com/ElI1w.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="https://i.stack.imgur.com/ElI1w.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="https://i.stack.imgur.com/ElI1w.jpg"> </div> <div class="step-title">Start contruction of your dream kitchen</div> <div class="step-number">4</div> <hr/> </div> </div>