SCSS

by Renan Ribeiro Brando

HTML

<div class="">
  <ul class="StepProgress">
    <li class="StepProgress-item ">
    <h3>
    Imagens do carro
    </h3>
      <strong>Post a contest</strong>
    </li>
    <li class="StepProgress-item">
      <strong>Award an entry</strong> Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
    </li>
    <li class="StepProgress-item ">
      <strong>Post a contest</strong>
    </li>
    <li class="StepProgress-item">
      <strong>Handover</strong>
    </li>
    <li class="StepProgress-item">
      <strong>Provide feedback</strong>
    </li>
  </ul>
</div>

SCSS

.StepProgress {
 position: relative;
  /* padding-left: 45px; */
  list-style: none;
  
  &::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #CCC;
  }
  
  &-item {
    position: relative;
    counter-increment: list;
     padding-bottom: 40px;
    
   
 
    &::after {
      content: counter(list);
      display: inline-block;
      position: absolute;
      top: 0;
      width: 30px;
      height: 25px;
      border: 2px solid #CCC;
      border-radius: 50%;
      background-color: #ccc;
      padding-top: 6px;
      left: -40px;
        text-align: center;
        color: white;
    }
  }
  
}