.progress-indicator { list-style: none; width: 100%; margin: 0 auto; padding: 0; display: table; table-layout: fixed; } .progress-indicator > li { position: relative; display: table-cell; text-align: center; font-size: 1.5em; } .progress-indicator > li span { position: absolute; color: #e6e6e6; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.05px; text-transform: uppercase; } .progress-indicator > li::before { content: attr(data-step); display: block; margin: 0 auto; background: #e6e6e6; width: 1.5em; height: 1.5em; text-align: center; margin-bottom: 0.25em; line-height: 1.5em; border-radius: 100%; position: relative; z-index: 1000; } .progress-indicator > li::after { content: ''; position: absolute; display: block; background: #e6e6e6; width: 100%; height: 0.15em; top: 50%; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); left: 50%; margin-left: 1.5em\9; z-index: 0; } .progress-indicator > li:last-child:after { display: none; } .progress-indicator > li.is-complete { color: #1779ba; } .progress-indicator > li.is-complete::before, .progress-indicator > li.is-complete::after { color: #fefefe; background: #1779ba; } .progress-indicator > li.is-complete span { color: #1779ba; } .progress-indicator > li.is-current { color: #4eabe9; } .progress-indicator > li.is-current::before { color: #fefefe; background: #4eabe9; } .progress-indicator > li.is-current span { color: #4eabe9; }