css时间轴

样式如下：

.timeline {
  display: flex;
  flex-direction: column;
  padding: 0 70px;
  margin: 0;
  list-style: none;
  position: relative;
  &__item {
    display: flex;
    padding: 20px 0;
    position: relative;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      height: 50%;
      width: 2px;
      z-index: 1;
      border-left: 2px dashed #c6997f;
    }
    &::after {
      position: absolute;
      top: 56%;
      left: 0;
      content: '';
      height: 50%;
      width: 2px;
      z-index: 1;
      border-left: 2px dashed #c6997f;
    }
    &:first-child::before {
      display: none;
    }
    &:last-child::after {
      display: none;
    }
  }
  &__step {
    padding-right: 24px;

    &__marker {
      position: relative;
      left: 1px;
      top: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      height: 8px;
      min-height: 8px;
      width: 8px;
      min-width: 8px;
      background: #794425;
      z-index: 2;
    }
  }
}

<ul class="timeline">
  <li class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker"></div>
    </div>
    <div class="timeline__content">2022-12-13 20:29:03 包裹正在等待揽收</div>
  </li>

  <li class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker"></div>
    </div>

    <div class="timeline__content">已揽件 2022-12-14 08:28</div>
  </li>

  <li class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker"></div>
    </div>

    <div class="timeline__content">2022-12-12 22:10:29 商品已经下单</div>
  </li>

  <li class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker timeline__step__marker--blue"></div>
    </div>

    <div class="timeline__content">2022-12-14 08:28:57 〔台北市]台北市的 XXX[137XXXX0866] 已揽收</div>
  </li>
</ul>