【初心者でもわかる】CSSだけでステップフローを作る - Qiita

<ul class="flow"> <li class="current">入力</li> <li>確認</li> <li>完了</li> </ul> .flow { width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */ display: flex; /* flexboxで横並びにする */ justify-content: space-between; /* 横並びにしたものを等間隔で並べる */ } .flow li { color: #333; /* 文字色を黒に指定 */ font-size: 11px; /* 文字サイズを指定 */ width: calc(100% / 3); /* 横幅を三等分した1つの大きさに指定 */ background: #eee; /* 背景色をグレーに指定 */ line-height: 50px; /*