html - 创建连接的圈子

Question

我需要创建这个图像:

它包含带有线条的圆圈。我画了红色方框来表明它们是 div，因为当它在移动设备上显示时应该是这样的:

我试过 what this post says但它对我不起作用，因为 li 不会在同一个 div 中。

这是我的代码:

.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>

如何创建用线连接的圆圈？

Answer 1

以下解决方案适用于带有线条的版本。
要删除行，请将 content: none; 放在 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>