.my-step-bar {
    padding-left: 0;
    list-style: none;
    counter-reset: steps;
    display: table;
    width: 100%;
}

    .my-step-bar li {
        counter-increment: steps;
        display: table-cell;
        vertical-align: top;
        text-align: center;
        position: relative;
    }

        .my-step-bar li:before {
            content: counter(steps);
            margin: 0 auto .5em;
            display: block;
            width: 2.5em;
            height: 2.5em;
            text-align: center;
            line-height: 2.5em;
            border: 3px solid #53175e;
            border-radius: 100%;
            background: white;
            position: relative;
        }

        .my-step-bar li.passed:before {
            background-color:#53175e !important;
            color:#fff !important;
        }

        .my-step-bar li.current:before {
            border: 3px dotted #812192 !important;
        }

        .my-step-bar li:after {
            content: '';
            border-top: 3px solid #53175e;
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            top: 1.25em;
            z-index: -1;
        }

        .my-step-bar li:first-of-type:after {
            right: 50%;
        }

        .my-step-bar li:last-of-type:after {
            left: 50%;
        }