現在地マーカー付きタイムライン(静止)

<ul class="d06-08-09-line">
          <li><span class="d06-08-09-dot"></span><div class="d06-08-09-body"><span class="d06-08-09-yr">2020</span><h4>入社</h4></div></li>
          <li><span class="d06-08-09-dot"></span><div class="d06-08-09-body"><span class="d06-08-09-yr">2022</span><h4>係長昇格</h4></div></li>
          <li class="d06-08-09-now"><span class="d06-08-09-dot d06-08-09-dot-now"></span><div class="d06-08-09-body"><span class="d06-08-09-yr d06-08-09-now-yr">現在</span><h4>チームリーダー</h4></div></li>
        </ul>

.d06-08-09{padding:22px 20px 22px 14px;}
        .d06-08-09-line{list-style:none;margin:0;padding:0;position:relative;width:100%;}
        .d06-08-09-line::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#dde2e8;}
        .d06-08-09-line li{position:relative;padding:0 0 18px 24px;}
        .d06-08-09-line li:last-child{padding-bottom:0;}
        .d06-08-09-dot{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;background:#b8c0cc;border:2px solid #fff;box-shadow:0 0 0 1px #b8c0cc;}
        .d06-08-09-dot-now{background:#e0473f;box-shadow:0 0 0 3px rgba(224,71,63,.2);}
        .d06-08-09-yr{display:block;font-size:11px;color:#999;font-weight:700;}
        .d06-08-09-now-yr{color:#e0473f;}
        .d06-08-09-body h4{margin:2px 0 0;font-size:13px;color:#222;}
        .d06-08-09-now .d06-08-09-body h4{color:#e0473f;}