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

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

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

1. 凡应开始
2. 它应该有多长

，你可以看到，它应该开始考虑到你的#wizard .step有1px边框的填充，内容宽度为40px。

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

所以，你的位置，风格需要包括left: 46px：

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

至于需要多长时间是，它需要跨越margin-right的当前#wizard .step，然后是下一个#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>

---

注：我真的不清楚为什么，但是，尽管上述方法的结果应该是完美的，但实际结果却包含了微小的差距 - 给人的印象是来自20世纪50年代的教科书。

如果你想消除这些差距，使用下面的样式声明，而不是：

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

Answer 2

由于您margin-right和margin-left都3em样品，请尝试使用6em代替100%

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

剩下一个LITT乐空间，但你可以调整它：

right:-6.3em; 
width:6.3em;