### 題目
使用偽元素來做出以下付款進度條

付款進度條：


請修改下方 HTML 與 CSS 區塊內 `...` 部分，完成上圖付款進度條
> 在 RWD 時，會出現部分跑版的情況，也記得要顧及到喔。

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <ol class="pay-list mt-5 d-flex justify-content-between list-unstyled ...">
        <li class="d-flex flex-column align-items-center">
          <p class="number d-flex justify-content-center align-items-center number-active mb-0">1</p>
          <p class="fw-bold mb-0">訂單確認</p>
        </li>
        <li class="d-flex flex-column align-items-center">
          <p class="number d-flex justify-content-center align-items-center mb-0">2</p>
          <p class="fw-bold mb-0">結帳付款</p>
        </li>
        <li class="d-flex flex-column align-items-center">
          <p class="number d-flex justify-content-center align-items-center mb-0">3</p>
          <p class="fw-bold mb-0">訂單結果</p>
        </li>
      </ol>
    </div>
  </div>
</div>

CSS：

body {
  font-family: "Noto Serif TC", serif;
  background-color: #f3f1e5;
}
.number {
  border: 1px solid #000;
  width: 32px;
  height: 32px;
  background-color: #f3f1e5;
  z-index: 1;
}
@media (min-width: 768px) {
  .number {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}
.number-active {
  background-color: #000;
  color: #FBFF22;
}
.pay-list::before {
  width: 83%;
  height: 1px;
  ...
}

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/jmimiding4104/pen/LYXqoJK
-->

回報區
---

| no | Discord | CodePen / 答案 |
|:-----------------:|:-----------------:|:-------------------------------------------------------------------:|
| 1 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWZWyvL) |
| 2 | meowmeow| [Codepen](https://codepen.io/snow1224/pen/qBLBZjO) |
| 3 | Berlin | [Codenpen](https://codepen.io/3qberlin/pen/JjwjXyd) |
| 4 | kuanju27 | [Codenpen](https://codepen.io/Eero-Chiao/pen/BavaKdJ) |
| 5 | Ann Chou | [Codenpen](https://codepen.io/annchou_illu/pen/GRPRZvE) |
| 6 | .icesam | [Codenpen](https://codepen.io/icesam/pen/xxmxVPG) |
| 7 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/qBLBZoZ?editors=1100) |
| 8 |Moreene|[CodePen](https://codepen.io/Moreene/pen/XWoWdYW)|
| 9 | Yu | [Codenpen](https://codepen.io/yuch3n_chen/pen/KKbKzob) |
| 10 | townyuan | [Codenpen](https://codepen.io/townyuan/pen/jOXOqKX) |
| 11 | deli0529 | [Codenpen](https://codepen.io/delichaomoon/pen/XWoWdgL) |
| 12 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/dywyMLW) |
|13 | pinyi_9 | [Codenpen](https://codepen.io/Wpypy/pen/Yzdzqgx) |
| 14| hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/LYMYNwW) |
| 15| ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/LYMYZPy) |
| 16| SmallP | [Codepen](https://codepen.io/smallp/pen/MWZWyMg) |
| 17 | bf_tsai | [Codenpen](https://codepen.io/BF-Tsai/pen/vYvYKEp) |
| 18 | jacky7035 | [Codenpen](https://codepen.io/adens123/pen/jOXOqgR) |
| 19 | AYA | [Codenpen](https://codepen.io/NoNameNote/pen/dywyXWd) |
| 20 | ovo.yun | [Codenpen](https://codepen.io/yun-the-scripter/pen/gOZOMoZ) |
| 21 | lychee_kk | [Codenpen](https://codepen.io/kakakala/pen/wvRvWgO) |
| 22 | hao2485 | [Codenpen](https://codepen.io/Seanfeb16/pen/rNoNLdj) |
| 23 | shcopy | [Codenpen](https://codepen.io/shcopy/pen/abPbmwa) |
| 24 | zhu.lin | [Codenpen](https://codepen.io/codepenplayer/pen/jOXOMGm) |
| 25 | 泊岸#3466 | [Codenpen](https://codepen.io/qoq77416416/pen/vYvYXwN) |
| 26 | Uli | [Codenpen](https://codepen.io/uli1313/pen/ExGxgMr) |
| 27 | hannahTW | [Codenpen](https://codepen.io/hangineer/pen/NWeWRZa) |
| 28 | Tina02 | [Codenpen](https://codepen.io/chjitlox-the-bashful/pen/zYyYowg) |
| 29 | ming0712 | [Codenpen](https://codepen.io/StevenHuang/pen/gOZOgZy) |
| 30 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/PoXopGw) |
| 31 | cest_jessie | [Codenpen](https://codepen.io/itsjessiechen/pen/WNLNpZR) |
| 32 | rjjq | [Codenpen](https://codepen.io/rjjq/pen/JjwPexv) |
| 33 | soniawu | [Codenpen](https://codepen.io/YUJOU/pen/YzdzVeN?editors=1100) |
| 34 | Vic_Liou | [Codenpen](https://codepen.io/allenliou-java/pen/ZEVEKRN) |
| 35 | yu.t_liu | [Codenpen](https://codepen.io/YuT200053/pen/jOXOGBK) |
| 36 | m_m | [Codenpen](https://codepen.io/minnn7716/pen/MWZWEPd) |
| 37| SKEY#9905 | [Codenpen](https://codepen.io/Dale-Chien/pen/rNoNZaz) |
| 38| Johnson3669 | [Codenpen](https://codepen.io/crpbugqy-the-typescripter/pen/oNJNMeo) |
| 39 | wind | [Codenpen](https://codepen.io/wind7y/pen/bGOGOKw) |
| 40 | Jules_Hsu | [Codenpen](https://codepen.io/cjntfsoq-the-animator/pen/jOXEOXE) |
| 41 | JohnChien | [Codenpen](https://codepen.io/glqwazid-the-selector/pen/GRPggwJ) |
| 42 | Atsushi#6888 | [Codenpen](https://codepen.io/atsushi-amuro/pen/XWoJdRO?editors=1100) |
| 43 | yunhsinnnnnnn | [Codenpen](https://codepen.io/yun___hsin/pen/abPzpNN) |
| 44 | Paul#7426 | [Codenpen](https://codepen.io/paul-1997/pen/mdayoYG?editors=1100) |
| 44 | awei | [Codenpen](https://codepen.io/hong-wei/pen/vYvOKde?editors=1100) |
| 45 | shuuu | [Codenpen](https://codepen.io/afjrvjzl-the-bashful/pen/BavNpyJ) |
| 46 | PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/WNLvRGg)
| 47 | mm_ieat | [CodePen](https://codepen.io/MINN3/pen/poqJRKX)
| 48 | runweiting | [Codenpen](https://codepen.io/weiting14/pen/wvRadrJ) |
| 49 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/YzdXJvP?editors=1100)|
| 50 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/XWomWpL)|
| 51 | tanuki5863 | [Codenpen](https://codepen.io/tanuki320/pen/dywYVQx) |
| 52 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/jOXbZRa) |
| 53 | Long | [Codepen](https://codepen.io/Loonng/pen/QWzywzW?editors=0110) |
| 54 | adele6199 | [Codenpen](https://codepen.io/codepen-io-winnie/pen/MWZKvwd?editors=1100) |
| 55 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 56 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/wvRGPVP?editors=1100) |
| 57 | Randy | [Codepen](https://codepen.io/landy510/pen/MWZjoJp?editors=1100)
| 58 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/ExGZagR?editors=1100) |
| 59 | RX00#5351 | [Codenpen](https://codepen.io/llqzknqv-the-styleful/pen/rNojKVo) |
| 60 | 歐陽龍龍#1061 | [Codenpen](https://codepen.io/dizzydog-rgb/pen/NWedzjy) |
| 61 | sinsaki225 | [Codenpen](https://codepen.io/a8322342/pen/gOZmobE) |
| 62 | yuan2781 | [Codenpen](https://codepen.io/ismebir/pen/rNozgmw) |
| 63 | patrickpie | [Codenpen](https://codepen.io/patrickpie/pen/GRPxNZW) |

- 快速複製

|  |  | [Codenpen]() |