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

我试图在空圆圈之间画一条水平线（没有背景），如何在不进入另一个圆圈或无法到达的情况下，从一个圆圈到另一个圆圈画一条线来精确匹配

我使用了

#向导{
背景色：#eee；
显示：内联块；
填充：15px；
}
#向导。步骤{
显示：内联块；
宽度：40px；
高度：40px；
背景色：透明；
边框：1px实心#000；
边界半径：50%；
文本对齐：居中；
填充：2px；
右边距：3em；
左边距：3em；
位置：相对位置；
}
#向导。步骤：在{
内容：“；
显示：块；
高度：1px；
背景色：#000；
位置：绝对位置；
左：自动；
右图：-100%；
宽度：100%；
最高：50%；
}
#向导。步骤：最后一个子项：之后{
显示：无；
}
#向导。步骤span{
填充：11px；
显示：块；
}

1.
2.
3.

由于您的

右边距

和

左边距

都是

3em

，请尝试使用

6em

而不是

100%

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

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

right:-6.3em;
width:6.3em;

---

如果要绝对定位

#向导.step:：pseudo元素之后，您需要知道两件事：

应该从哪里开始
应该多长时间
考虑到
#向导.step
的边框为
1px
，填充为
2px
，内容宽度为
40px
，您可以看到它应该从哪里开始

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

因此，您的位置样式需要包括
左：46px
：

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

至于它需要多长时间，它需要跨越当前
向导的
右边距
。步骤
，然后是下一个
向导的
左边距
。步骤

由于这两个元素都是
3em
，因此您可以为其提供
#向导。步骤：：在
伪元素之后
宽度
为
6em

总而言之：


#向导{
背景色：#eee；
显示：内联块；
填充：15px；
}
#向导。步骤{
显示：内联块；
宽度：40px；
高度：40px；
背景色：透明；
边框：1px实心#000；
边界半径：50%；
文本对齐：居中；
填充：2px；
右边距：3em；
左边距：3em；
位置：相对位置；
}
#向导。步骤：：之后{
内容：''；
显示：块；
位置：绝对位置；
最高：50%；
左：46px；
宽度：6em；
高度：1px；
背景色：#000；
}
#向导。步骤：最后一个子项：：之后{
显示：无；
}
#向导。步骤span{
填充：11px；
显示：块；
}

1.
2.
3.
为什么你不能用
左：100%
代替数学忍者？哈哈。公平的问题。习惯的力量，我想-我很少用
%
做任何事情。我隔离了这个问题，这是由于一些空白，你可以选择将鼠标从一个一直移动到三个。你可以看到。这是相关的。谢谢你的回答，看起来很棒。。但是，如果向导有响应，这将很复杂\