<h1>Navigation wizard example with equal width steps and flexible width of last step</h1>

<div class="container">
    
  <ul class="wizard">
    <li class="wizard-step">
      <a href="#1" class="wizard-step-link">
        This is the first step
      </a>
    </li>
    <li class="wizard-step">
      <a href="#2" class="wizard-step-link">
        This is the second step
      </a>
    </li>
    <li class="wizard-step">
      <a href="#3" class="wizard-step-link">
        This is the third step
      </a>
    </li>
    <li class="wizard-step">
      <a href="#4" class="wizard-step-link">
        This is the fourth step
      </a>
    </li>
    <li class="wizard-step">
      <a href="#5" class="wizard-step-link">
        This is the last step with flexible width
      </a>
    </li>
  </ul>
    
</div>

<p style="text-align:center">Read more: <a href="https://auralinna.blog/post/2018/navigation-wizard-example" target="_blank">Navigation wizard example with equal width steps and flexible width of last step</a></p>

html, body {
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
body {
  margin: 20px;
}

h1 {
  line-height: 1.2;
  margin-bottom: 35px;
  text-align: center;
}

.container {
  background: #eee;
  margin: 0 auto 35px;
  max-width: 920px;
  padding: 20px;
}

/* Actual code example */

.wizard {
  counter-reset: stepNo;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin: 0;
  padding: 0;
}

.wizard-step {
  -webkit-flex: 1 0 0px;
      -ms-flex: 1 0 0px;
          flex: 1 0 0px;
  list-style: none;
  padding: 0 2% 0 0;
  position: relative;
}
.wizard-step::before {
  border-top: 3px solid #333;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 25px;
}
.wizard-step:last-child {
  border: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.wizard-step:last-child::before {
  border: 0 none;
}
.wizard-step:last-child:nth-child(2) {
  max-width: calc(100% / 2);
}
.wizard-step:last-child:nth-child(3) {
  max-width: calc(100% / 3);
}
.wizard-step:last-child:nth-child(4) {
  max-width: calc(100% / 4);
}
.wizard-step:last-child:nth-child(5) {
  max-width: calc(100% / 5);
}
.wizard-step:last-child:nth-child(6) {
  max-width: calc(100% / 6);
}
.wizard-step:last-child:nth-child(7) {
  max-width: calc(100% / 7);
}
.wizard-step:last-child:nth-child(8) {
  max-width: calc(100% / 8);
}
.wizard-step:last-child:nth-child(9) {
  max-width: calc(100% / 9);
}
.wizard-step:last-child:nth-child(10) {
  max-width: calc(100% / 10);
}

.wizard-step-link {
  color: #333;
  display: block;
  font-size: 1rem;
  font-weight: bold;
  position: relative;
  text-decoration: none;
  z-index: 10;
}
.wizard-step-link:before {
  background: #333;
  color: #fff;
  counter-increment: stepNo;
  content: counter(stepNo) ".";
  display: block;
  font-size: 2rem;
  height: 50px;
  line-height: 50px;
  margin-bottom: 12px;
  text-align: center;
  width: 50px;
}
.wizard-step-link:hover,
.wizard-step-link:focus {
  color: #000;
  text-decoration: none;
}
.wizard-step-link:hover:before,
.wizard-step-link:focus:before {
  background: #fff;
  border: 1px solid #333;
  color: #333;
}

/** This JS is just for the demo to show dynamic width of last step */

const lastStepTyper = () => {
  const delay = 200;
  const lastStep = document.querySelector('.wizard-step:last-child .wizard-step-link')
  const txt = lastStep.text.trim().split('')
  
  lastStep.text = ''
  
  for (i = 0; i < txt.length; i++) {
    setTimeout(() => {
      lastStep.append(txt.shift())
    }, delay * i)
  }
  
  setTimeout(() => {
    lastStepTyper()
  }, delay * i + 1000)
}

lastStepTyper()