<ul class="a">
  <li>1</li>
  <li>2</li>
  <li class="active">3</li>
  <li>4</li>
  <li>5</li>
</ul>

body {
  padding: 50px;
}

.a {
  --color-not-active: #959595;
  --color-active: #f22525;
  --color-finished: #fff;
  
  --background-not-active: #e0e0e0;
  --background-active: #fff;
  --background-finished: #f22525;
  
  --border-not-active: var(--background-not-active);
  --border-active: var(--color-active);
  --border-finished: var(--background-finished);
  
  
  display: flex;
  align-items: center;
  
  li {
    position: relative;
    border: 1px solid var(--border-finished);
    border-radius: 50%;
    
    width: 15px;
    height: 15px;
    
    text-align: center;
    
    border-color: var(--border-finished);
    background: var(--background-finished);
    color: var(--color-finished);
    
    &:not(:first-child) {
      margin-left: 10px;
      
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% - 1px);
        left: 0;
        height: 2px;
        width: 10px;
        margin-left: -11px;
        background: var(--background-finished);
      }
    }
    
    &.active {
      background: var(--background-active);
      color: var(--color-active);
      border-color: var(--border-active);
      
      ~ li {
        background: var(--background-not-active);
        color: var(--color-not-active);
        border-color: var(--border-not-active);
        
        &:before {
          background: var(--background-not-active);
        }
      }
    }
  }
}