購入フローなどの進捗を示すステップ表示。番号の丸を線でつなぎ、完了・現在地・未到達を色分けします。現在地はaria-currentで伝えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
つなぎの線は各liの ::before を left: -50% から right: 50% まで敷いて左隣の丸まで届かせ、z-index: -1 で丸の下に潜らせます。「完了→次」の線だけ緑にするのは隣接セレクタ「.done + li::before」の仕事です。完了は✓と色、現在地は aria-current="step" で構造的にも伝えます。
ステップ名が長い場合は白のtext-shadowかpaddingで線との重なりを整えてください。縦型にする場合はflex-directionと線の向きを入れ替えます。
3段階のステップインジケーターを作ってください。olでマークアップし、番号の丸を::beforeの線でつなぎ、完了（✓・緑）・現在地（aria-current="step"・朱）・未到達を色分けしてください。