引导程序中的垂直边距

Question

如何添加下图所示的边距或线条。

 [![Please see the following image.][1]][1]

Answer 1

.circles {
  list-style: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0;
  margin: 0;
  position: relative;
}

.circles::before {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 5px;
  display: block;
  content: '';
  background: #000;
  transform: translateX(-50%);
  z-index: -1;
}

.circles>li {
  margin-bottom: 15px;
  display: flex;
  list-style: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0392B2;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: sans-serif;
  font-size: 14px;
}

.circles>li:last-child {
  margin-bottom: 0;
}

<ul class="circles">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 2

HTML

libpath

css

<div class="parant">
  <h1 class="round">1</h1>
  <h1 class="line"></h1>
  <h1 class="round">2</h1>
</div>