CSS pseudo element li:after not showing

Just pasting the code as it is into JSFiddle works, but doesn't work in SmartForms. Inspecting the elements using Chrome tells me the li:after is somehow stacked behind everything. Here's what I used for the CSS in order for the lines to appear between each circles:

 .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
      position: relative;
      z-index: 1;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
  }

I just remove the z-index in li:after, and set z-index in li:before. But for z-index to work, you need to set position to either absolute or relative.