Позиционирование текста перед номером, сгенерированным упорядоченным списком

Question

Я работаю над виджетами шага выполнения и пытаюсь использовать для номера каждого шага. Прямо сейчас он отображается как 1 step, что является поведением по умолчанию. Кто-нибудь знает, как я могу позиционировать текст так, чтобы он отображался как step 1? Дополнительную информацию см. На моем example на Codepen. Спасибо!

Answer 1

Просто измените ваш &:before в &:after

.progress-step-container { 
 
    width: 100%; 
 
    display: flex; 
 
    list-style-type: none; 
 
    margin-left: 0; 
 
} 
 
.progress-step-container:first-child { 
 
    counter-reset: customlistcounter; 
 
} 
 
.progress-step-container .step { 
 
    display: inline; 
 
    max-width: 108px; 
 
    width: 108px; 
 
    text-align: center; 
 
    border-bottom: 2px solid #ddd; 
 
    padding-bottom: 10px; 
 
    counter-increment: customlistcounter; 
 
} 
 
.progress-step-container .step.current { 
 
    border-bottom: 6px solid #1578CD; 
 
    max-width: 442px; 
 
    width: 442px; 
 
} 
 
.progress-step-container .step:after { 
 
    content: counter(customlistcounter); 
 
}

<ol class="progress-step-container"> 
 
    <li class="step step-1"> 
 
    <span class="step-message"></span> 
 
    </li> 
 
    <li class="step step-2 current"> 
 
    <span class="step-message">Question</span> 
 
    </li> 
 
</ol>