So verschieben Sie die Linie nach dem Kreis zum Ende des Kreises

Question

Ich arbeite an einem mehrstufigen Fortschrittsbalken. Ich muss die Kreise (die die Schritte darstellen) über die Linien setzen. Ich füge die Linie zu einem Kreis unter Verwendung :after hinzu. Ich benutzte z-index, um den Kreis immer oben zu setzen, aber es hat nicht funktioniert. Irgendwelche Ideen? Hier

ist die 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

ich Ihren Z-Index auf -1 und die Kreisschichten auf der Oberseite der Bar geändert, ich denke, das könnte sein, was du bist Suche nach:

Line 56:  z-index: -1;