オーダーリストで生成された番号の前にテキストを配置

Question

進捗手順ウィジェットで作業中で、<ol>を使用して各ステップに番号を付けようとしています。現在、デフォルトの動作である1 stepと表示されます。誰も私はどのようにそれがstep 1のように表示されるようにテキストを配置することができます知っていますか？詳細については、Codepenのexampleをご覧ください。ありがとうございました！

Answer 1

だけ&: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>

にあなたの &:beforeを変更