如何将圆圈后面的线条移动到圆圈的底部

Question

我正在制作一个多步进度条。我需要将圆圈（代表步骤）放在线条的顶部。我使用:after将该行添加到圆圈中。我使用z-index将圈子放在最前面，但它不起作用。有什么想法吗？

这是jsfiddle：http://jsfiddle.net/gaqz77qf/1/

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我将你的z-index更改为-1，并在条形图顶部显示了圆圈图层，我想这可能就是你要找的东西：

Line 56:       z-index: -1;