<ol class="steps">
    <li>
      <a href="#">Signup</a></li>

    <li>
      <a href="#">Login</a></li>

    <li class="current">
      <a href="#">Complete Profile</a></li>

    <li>
      <a href="#">Billing</a></li>

    <li>
      <a href="#">Yay!</a></li>

  </ol>

// Playground styles
html { font-family: sans-serif; background: #ebebeb; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; justify-content: center; align-items: center; }


// Variables
$steps-width: 100%;

$label-font-size: .75em;
$label-line-height: 1.25em;

$counter-font-size: 1.25em;   // dependent on label font size

$circle-diameter: 4em;        // dependent on counter font-size
$circle-border-width: .375em; // dependent on counter font-size
$line-width: .5em;            // dependent on counter font-size


// Steps Progress Bar
ol.steps {
  display: flex;
  list-style: none; text-align: center;
  counter-reset: milestones; // init counter

  // design
  width: $steps-width;
  margin: 0; padding: 0;

  li {
    flex-grow: 1; flex-basis: 0;
    margin: 0; padding: 0;
    position: relative; z-index: 1;

    // design
    font-size: $label-font-size; line-height: $label-line-height;
  }

  a { display: block; text-decoration: none; }

  a::before,
  a::after {
    display: block;
    font-size: $counter-font-size;
    box-sizing: border-box;
  }

  // circle
  a::before {
    border-radius: 50%;
    text-decoration: none;

    // add counter
    content: counter(milestones);
    counter-increment: milestones;

    // design
    width: $circle-diameter; height: $circle-diameter; line-height: $circle-diameter;
    margin: 0 auto .5em;
  }

  // connecting line
  a::after {
    content: "";
    position: absolute; z-index: -1;
    width: 100%; height: 0; border: 0; 

    // design
    left: 50%; top: $circle-diameter/2;
    border-bottom-width: $line-width; margin-top: -$line-width/2;
  }
  // don't show for last element
  li:last-child a::after { display: none; }

  
  // Colors
  a,
  a:visited { color: #9ca09f; }
  
  // finished milestone - default
  a::before { color: #fdfefe; background-color: #b32f59; box-shadow: inset 0 0 0 $circle-border-width #9f2a4f; }
  a::after { border-bottom-style: solid; border-color: #9f2a4f; }

  // current milestone
  li.current {
    a { font-weight: 600; color: #9f2a4f; }
    a::before { color: #9f2a4f; background-color: #fcfcfa; box-shadow: inset 0 0 0 $circle-border-width #9f2a4f; }
    a::after { border-style: dashed; border-color: #9f2a4f; }
  }

  // unfinished milestone
  li.current ~ li {
    a::before { color: #707070; background-color: #e7e7e3; box-shadow: inset 0 0 0 $circle-border-width #d4d4d4; }
    a::after { border-bottom-style: none; }
  }
}