Frustrated by Magento? Then you’ll love
One other neat thing I noticed about Magento’s 2 checkout is the stylized progress bar involved zero images. The orange lines and step numbers surrounded by circles are 100% driven by non-background image CSS.
The checkmark that indicates the active step comes from the following CSS rules
.opc-progress-bar-item._active > span:after {
font-family: 'luma-icons';
content: 'e610';
}
The e610 is a private unicode character that Magento populates via it’s bananas custom font thing.
The progress features come from a equally crazy feature of CSS I wasn’t aware of – CSS Counters.
.opc-progress-bar-item > span:before, .opc-progress-bar-item > span:after {
/* ... */
content: counter(i);
counter-increment: i;
/* ... */
}