.progressbar { counter-reset: step; display: flex; justify-content: space-evenly; } .progressbar li { list-style-type: none; width: 25%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d; z-index: 2; } .progressbar li::before { width: 30px; height: 30px; content: counter(step); counter-increment: step; line-height: 30px; border: 2px solid #d6d9dc; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; z-index: -1; } .progressbar li::after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #d6d9dc; top: 15px; right: 62%; z-index: -1; } .progressbar li:first-child::after { content: none; } .progressbar li.active { color: $primary-blue; } .progressbar li.active::before { border-color: $primary-blue; z-index: 1; } .progressbar li.active + li::after { background-color: $primary-blue; z-index: -1; } .progressbar li.complete::before { background-color: $primary-blue; color: $ui-white; }