html - 透明背景圆圈之间的水平线

Question

我试图在空圆圈(无背景)之间画一条水平线，如何从一个圆圈到另一个圆圈绘制一条线以完全匹配而不进入另一个圆圈或未到达另一个圆圈？

我使用 codepen 做了样本

#wizard {
  background-color: #eee;
  display: inline-block;
  padding: 15px;
}
#wizard .step {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  padding: 2px;
  margin-right: 3em;
  margin-left: 3em;
  position: relative;
}
#wizard .step:after {
  content: "";
  display: block;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: auto;
  right: -100%;
  width: 100%;
  top: 50%;
}
#wizard .step:last-child:after {
  display: none;
}
#wizard .step span {
  padding: 11px;
  display: block;
}

<div id="wizard">
  <div class="step active">
    <span>1</span>
  </div>
  <div class="step">
    <span>2</span>
  </div>
  <div class="step">
    <span>3</span>
  </div>
</div>

Answer 1

由于您的 margin-right 和 margin-left 都是 3em，请尝试使用 6em 而不是 100%

 left:auto;
 right:-6em;
 width:6em;

这会留下一点空间，但您可以调整它:

right:-6.3em;
width:6.3em;