何ステップ目かが分かるようステップバーを入れてみたい

<div class="onb-productname-steps-bar">
  <!-- 丸を塗りつぶしたい場合はclass内に onb-productname-step-completedを追記する -->
  <div class="onb-productname-step onb-productname-step-completed">1</div>
  <div class="onb-productname-line"></div>
  <div class="onb-productname-step">2</div>
  <div class="onb-productname-line"></div>
  <div class="onb-productname-step">3</div>
  <!-- 丸を塗りつぶしたい場合はclass内に onb-productname-step-completedを追記する -->
</div>

<style>
.onb-productname-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ステップの丸のデザインの設定 */
.onb-productname-step {
  width: 30px;
  height: 30px;
  border: 1px solid #46A6FF; /* 枠線の色と太さを指定 */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px; /* 文字の大きさを指定 */
  color: #46A6FF; /* 文字の色を指定 */
}
/* ステップの丸のデザインの設定 */

/* ステップとステップをつなぐ線のデザインの設定 */
.onb-productname-line {
  height: 2px;
  width: 50px;
  background-color: #46A6FF;
}
/* ステップとステップをつなぐ線のデザインの設定 */

/* ステップの丸を塗りつぶすときのデザインの設定 */
.onb-productname-step-completed {
  background-color: #46A6FF;
  color: white;
}
/* ステップの丸を塗りつぶすときのデザインの設定 */

</style>