円の後にある行を円の下に移動する方法

Question

私は複数ステップの進行状況バーで作業しています。私は円の上に段を表す円を置く必要があります。私は:afterを使って円に円を追加します。私は円を常に上に置くのにz-indexを使ったが、うまくいかなかった。何か案は？ここで

はjsfiddleです：http://jsfiddle.net/gaqz77qf/1/

.visuallyhidden { 
 
    display: none; 
 
} 
 
.wizard-progress { 
 
    list-style: none; 
 
    list-style-image: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 20px; 
 
    float: left; 
 
    white-space: nowrap; 
 
} 
 
.wizard-progress li { 
 
    float: left; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.wizard-progress .step-name { 
 
    display: table-cell; 
 
    height: 32px; 
 
    vertical-align: bottom; 
 
    text-align: center; 
 
    width: 100px; 
 
    z-index: 100; 
 
} 
 
.wizard-progress .step-name-wrapper { 
 
    display: table-cell; 
 
    height: 100%; 
 
    vertical-align: bottom; 
 
} 
 
.wizard-progress .step-num { 
 
    border: 2px solid #ddd; 
 
    border-radius: 50%; 
 
    width: 24px; 
 
    height: 24px; 
 
    display: inline-block; 
 
    margin-top: 10px; 
 
    z-index: 100; 
 
} 
 
.wizard-progress .step-num:after { 
 
    content: ""; 
 
    display: block; 
 
    background: #CCC; 
 
    height: 15px; 
 
    width: 85px; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    left: 58px; 
 
    z-index: 0; 
 
} 
 
.wizard-progress li:last-of-type .step-num:after { 
 
    display: none; 
 
} 
 
.wizard-progress .active-step .step-num { 
 
    background-color: #ff0500; 
 
}

<ol class="wizard-progress clearfix"> 
 
    <li class="active-step"> 
 
    <span class="step-name"> 
 
      Foo 
 
     </span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">1</span> 
 
    </li> 
 
    <li> 
 
    <span class="step-name">Bar</span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">&hearts;</span> 
 
    </li> 
 
    <li> 
 
    <span class="step-name">Baz</span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">3</span> 
 
    </li> 
 
    <li> 
 
    <span class="step-name">Quux</span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">4</span> 
 
    </li> 
 
</ol>

Answer 1

私は-1あなたのzインデックスを変更し、バーの上に円形の層が、私はこれがあなたが何かかもしれないと思います探しています：

Line 56:  z-index: -1;