CSS Funnel

HTML

<ul class="funnel --5-steps">
    <li class="funnel__step --current">
      <div class="funnel__step__label">Où ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Quand ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Comment ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Pourquoi ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Avec qui ?</div>
    </li>
  </ul>
  <ul class="funnel --5-steps">
    <li class="funnel__step">
      <div class="funnel__step__label">Où ?</div>
    </li>
    <li class="funnel__step --current">
      <div class="funnel__step__label">Quand ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Comment ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Pourquoi ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Avec qui ?</div>
    </li>
  </ul>
  <ul class="funnel --5-steps">
    <li class="funnel__step">
      <div class="funnel__step__label">Où ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Quand ?</div>
    </li>
    <li class="funnel__step --current">
      <div class="funnel__step__label">Comment ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Pourquoi ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Avec qui ?</div>
    </li>
  </ul>
  <ul class="funnel --5-steps">
    <li class="funnel__step">
      <div class="funnel__step__label">Où ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Quand ?</div>
    </li>
    <li class="funnel__step">
      <div class="funnel__step__label">Comment ?</div>
    </li>
    <li class="funnel__step --current">
      <div class="funnel__step__label">Pourquoi ?</div>
    </li>
    <li...

CSS

.funnel {
  zoom: 1;
  background: #F5F5F5; }
  .funnel:after {
    content: '\00A0';
    display: block;
    clear: both;
    height: 0; }

.\--2-steps.funnel .funnel__step {
  left: 25%;
  width: 50%; }

.\--3-steps.funnel .funnel__step {
  left: 16.66667%;
  width: 33.33333%; }

.\--4-steps.funnel .funnel__step {
  left: 12.5%;
  width: 25%; }

.\--5-steps.funnel .funnel__step {
  left: 10%;
  width: 20%; }

.funnel,
.funnel__step {
  list-style: none;
  margin: 0;
  padding: 0; }

.funnel {
  counter-reset: funnel;
  overflow: hidden; }

.funnel__step {
  counter-increment: funnel;
  float: left;
  position: relative; }
  .funnel__step:before {
    content: '\00A0';
    background: #404040;
    bottom: 10px;
    display: block;
    height: 8px;
    position: absolute;
    width: 100%; }
  .\--current ~ .funnel__step:before, .funnel__step.\--current:before {
    background: #D6D6D0; }
  .funnel__step:after {
    background: #FFF;
    border: 8px solid #404040;
    border-radius: 28px;
    content: '\00A0';
    display: block;
    height: 12px;
    left: -14px;
    position: relative;
    width: 12px; }
    .\--current ~ .funnel__step:after {
      border-color: #D6D6D0; }
  .funnel__step:last-child:before {
    background: none; }

.funnel__step__label {
  color: #404040;
  position: relative;
  left: -50%;
  text-align: center; }
  .funnel__step__label:before {
    content: counter(funnel) ". "; }
  .\--current ~ .funnel__step .funnel__step__label {
    color: #D6D6D0; }