Ralph David Abernathy Ralph David Abernathy - 1 month ago 5
CSS Question

Positioning text before the number generated by an ordered list

I am working on a progress steps widget, and trying to use an

to number each step. Right now, it shows up as
1 step
, which is the default behavior. Does anyone know how I can position the text so that it shows up like
step 1
? Please see my example on Codepen for more information. Thank you!


Just change your &:before into &: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 class="step step-2 current">
    <span class="step-message">Question</span>