Позиция была установлена, но z-индекс недействителен

Question

Я хочу создать индикатор выполнения шага, но у меня проблемы с CSS.
Я хочу, чтобы круги были закрашены линиями ，, но это не сработало.
Демонстрация выглядит следующим образом:

HTML:

ol {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  display: table-cell;
  text-align: center;
}

li:after {
  content: "";
  position: relative;
  z-index: 1000;
  display: block;
  width: 2em;
  height: 2em;
  margin: 0 auto;
  line-height: 2em;
  color: #fff;
  border: 0.2em #e1e1e1 solid;
  border-radius: 100%;
}

li:not(:last-child):before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0.2em;
  background-color: #e1e1e1;
}

<ol>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
</ol>

codepen

Answer 1

Просто добавьте фон к своим кругам:

ol {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  display: table-cell;
  text-align: center;
}

li:after {
  content: "";
  position: relative;
  z-index: 1000;
  display: block;
  width: 2em;
  height: 2em;
  margin: 0 auto;
  line-height: 2em;
  color: #fff;
  border: 0.2em #e1e1e1 solid;
  border-radius: 100%;
  background:white;               /* add this */
}

li:not(:last-child):before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0.2em;
  background-color: #e1e1e1;
}

<ol>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
</ol>

Answer 2

добавьте цвет фона к

&:after {background:#fff;}

, и ваш код будет работать нормально.

Answer 3

Если я вас правильно понимаю, вам просто нужно установить background-color, а не color в селекторе &: after

&:after {
  background-color: #fff;
}