具有透明背景的圆圈之间的水平线

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;

Answer 2

如果你要绝对定位你的 #wizard .step::after 伪元素，你需要知道两件事：

1. 应该从哪里开始
2. 应该多长时间

鉴于您的#wizard .step 具有1px 的边框、2px 的填充和40px 的内容宽度，您可以看到它应该从哪里开始。

1px + 2px + 40px + 2px + 1px = 46px

所以你的位置样式需要包含left: 46px:

#wizard .step::after {
position: absolute;
top: 50%;
left: 46px;
}

至于需要多长时间，需要跨越当前#wizard .step的margin-right，然后是下一个#wizard .step的margin-left。

因为它们都是3em，所以你可以给它你的#wizard .step::after伪元素width或6em。

把它们放在一起：

#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;
  position: absolute;
  top: 50%;
  left: 46px;
  width: 6em;
  height: 1px;
  background-color: #000;
}

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

---

注意我真的不清楚为什么，但虽然上述方法的结果应该是完美的，但实际结果包括微小的差距 - 给人一种来自 1950 年代教科书的印象。

如果您想消除这些差距，请改用以下样式声明：

#wizard .step::after {
left: 45px;
width: 6.3em;
}