<div class="timeline">
  <div class="item">
    <div class="item__title">2023</div>
  </div>
  <div class="item active">
    <div class="item__title">2022</div>
  </div>
  <div class="item">
    <div class="item__title">2021</div>
  </div>
  <div class="item">
    <div class="item__title">2020</div>
  </div>
  <div class="item">
    <div class="item__title">2019</div>
  </div>
</div>

body {
  padding: 2rem;
}
.timeline {
  --color: #aaa;
  display: flex;
  justify-content: space-between;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 2px);
    width: 100%;
    height: 4px;
    background: var(--color);
  }
}

.item {
  &.active {
    --color: red;
  }
  width: 20px;
  height: 20px;
  background: var(--color);
  border: 4px solid white;
  border-radius: 100%;
  position: relative;
  box-shadow: 0 1px 5px rgba(#000, 0.5);
  &__title {
    color: var(--color);
    font-weight: bold;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -50%);
  }
}