帶透明背景的圓圈之間的水平線

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;