縦線+ドット型タイムライン(静止)

<ul class="d06-08-01-line">
          <li><span class="d06-08-01-dot"></span><div class="d06-08-01-body"><span class="d06-08-01-date">2019</span><h4>入社・配属</h4><p>新卒として入社し制作部に配属</p></div></li>
          <li><span class="d06-08-01-dot"></span><div class="d06-08-01-body"><span class="d06-08-01-date">2021</span><h4>主任昇格</h4><p>チームリーダーとして案件を統括</p></div></li>
          <li><span class="d06-08-01-dot"></span><div class="d06-08-01-body"><span class="d06-08-01-date">2024</span><h4>部門責任者</h4><p>制作部門全体のマネジメントを担当</p></div></li>
        </ul>

.d06-08-01{align-items:stretch;padding:24px 24px 24px 16px;}
        .d06-08-01-line{list-style:none;margin:0;padding:0;position:relative;width:100%;}
        .d06-08-01-line::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#d8dee6;}
        .d06-08-01-line li{position:relative;padding:0 0 20px 26px;}
        .d06-08-01-line li:last-child{padding-bottom:0;}
        .d06-08-01-dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:#3b6fe0;border:2px solid #fff;box-shadow:0 0 0 2px #3b6fe0;}
        .d06-08-01-date{display:block;font-size:12px;color:#3b6fe0;font-weight:700;letter-spacing:.03em;}
        .d06-08-01-body h4{margin:2px 0 4px;font-size:14px;color:#222;}
        .d06-08-01-body p{margin:0;font-size:12px;color:#777;line-height:1.5;}