透明な背景を持つ円の間の水平線

Question

空の円（背景なし）の間に水平線を描こうとしています。 ？あなたのmargin-rightとmargin-leftは両方3emなので

は私が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擬似要素を配置するつもりなら、あなたは2つのことを知っている必要があります：それは

を開始する必要があります

1. をどのくらいの時間がそれを開始すべき場所をあなたの#wizard .stepは、のパディングを1pxの境界を持っていることを考えると、見ることができます

する必要がありますおよびコンテンツの幅は40pxです。 = 46px

1px + 2px + 40px + 2px + 1pxだからあなたの位置スタイルがleft: 46px含める必要があります。それはする必要がありますどのくらいの時間については

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

を、それがmargin-rightにまたがるする必要があります現在の#wizard .stepのmargin-leftの次の#wizard .stepの

これらはいずれも3emなので、#wizard .step::afterwidthの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>

---

N.B.なぜ私には分かりませんが、上記のアプローチの結果は完璧であるべきですが、実際の結果には小さなギャップが含まれています。つまり、1950年代のテキストブックからの印象を与えます。あなたはこれらのギャップを解消したい場合

、代わりに、以下のスタイル宣言を使用します。数学の忍者であることの100％ `代わりに：

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

Answer 2

を使用してサンプルをした、6em代わりの100%

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

を使用してみてくださいLITTを去ることルスペースが、あなたはそれを微調整することができます

right:-6.3em; 
width:6.3em;