---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 40

## 偽元素（第六週 - 付款進度條）

### 題目
使用偽元素來做出以下排版

HTML：

<div class="bg-dark pt-4 pb-3">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-9 col-md-7 timeline">
      </div>
    </div>
    <div class="row">
      <div class="col-3 col-md-5">
        <div class="timeline-pointer text-center step-1 active">
          <p>課程報名</p>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="timeline-pointer text-center step-2">
          <p>信用卡付款</p>
        </div>
      </div>
      <div class="col-3 col-md-5">
        <div class="timeline-pointer text-center step-3">
          <p>付款成功</p>
        </div> 
      </div>
    </div>
  </div>
</div>

CSS（SCSS）：

.bg-dark {
  background-color: #1C1C1C;
}

.timeline {
  position: relative;
  &::after {
    ...
    ...
    top: 9px;
    left: 0;  
    right: 0;
    height: 2px;
    background-color: #C1C1C1;
  }
  &-pointer {
    position: relative;
    color: #C1C1C1;
    p {
      padding-top: 24px;
      margin-bottom: 0;
      line-height: 1.5;
    }
    &::before {
      ...
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border: 1px solid #C1C1C1;
      border-radius: 50%;
      background-color: #2D2D2D;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      z-index: 1;
    }
    &.step-1::before {
      content: '1';
    }
    &.step-2::before {
      content: '...';
    }
    &.step-3::before {
      content: '...';
    }
    &.active {
      color: #62DB54;
      &::before {
        color: #FFFFFF;  
        background-color: #62DB54;
        border-color: #62DB54;
      }
    }
  }
}

## 回報流程

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


<!-- 解答：https://codepen.io/hexschool/pen/jOzvPOz?editors=1100

此解答未載入字型，
實作時若要更貼近設計稿要記得載入
-->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:-------------------------------------------------------------------:|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/GRxYBKv) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/abYPepm) |
| Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/rNdoXKM) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/zYWygaN?editors=1100) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/mdxaNqK) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/KKobOBw) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/BarvXOb?editors=1100) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/rNdoXqW) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/abYPeMy) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/mdxvbbv?editors=1100) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/vYRbBEQ) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/QWmYLdE?editors=0100) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/RwMvbwE) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/jOzdNpm?editors=1100) |
| Clara#1275 | [Codepen](https://codepen.io/bsupixqu/pen/rNdPBQv) |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/MWVLgMV?editors=1100)|
|𝓛𝓊𝒸𝓎#8635|[codepen](https://codepen.io/lucygirl/pen/MWVLWmq)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/NWYoWJB) |
|大衛#4869|[codepen](https://codepen.io/exnsrpjc/pen/qBogEqR?editors=1100)|
|雷雷#7844|[codepen](https://codepen.io/lei-yi-jie/pen/ZExwYLY)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/poLGgVo)|
| Amberhh#2465 |[Codepen](https://codepen.io/Amberhh/pen/wvmNMOb?editors=0110) |
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/qBogWNK)|
|Hsiu#8767|[codepen](https://codepen.io/amy-hsiu/pen/bGvZNQz)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/bGvZBNy?editors=1100) |
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/jOzJyMw?editors=1100)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/eYMXgQQ)|
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/ZExPJYw) |
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/ExEMzwX)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/wvmNGbo)|
|鉦勝#8333|[Codepen](https://codepen.io/atckmax823/pen/RwMOKBN)|
|Ke#1391|[Codepen](https://codepen.io/federerke/pen/NWYmvby)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/jOzRaLB?editors=1100)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/xxWNYZZ?editors=1100)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/jOzjawP?editors=1100)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/abYgMeG)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/ZExgNoP)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/KKoOLBG)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/poVzyOQ)|
|evan |[Codepen](https://codepen.io/Evan_9837/pen/MWGWMMW)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/zYjGpNv)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/gOzpZWe)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/KKRVgYY)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/mdLwBzY)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/zYjdvEJ)|