前情提要

昨天切登入註冊的頁面，今天要來切預約課程的介面

觀察設計稿

這個是目前看到算很常出現的設計稿形式，一看就會知道應該要用偽元素，但是我一直沒有辦法很理解它的原理，尤其是還有first-child、last-child之類的東東，所以這次想單純紀錄他的寫法，以後比較會手刻或是可以當模板

偽元素介紹

要完成三個數字圓圈很簡單，但是中間的線條就有點麻煩了，下面是HTML的部分

<div class="row position-relative">
  <div
    class="offset-lg-2 col-lg-8 d-flex justify-content-center overflow-hidden"
  >
    <div class="col-4 step text-center">
      <span class="circle text-white bg-primary-green rounded-circle">1</span>
      <p class="label text-primary-green mt-2">課程報名</p>
    </div>
    <div class="col-4 step text-center">
      <span class="circle text-white bg-secondary-dark border rounded-circle"
        >2</span
      >
      <p class="label text-white mt-2">信用卡付款</p>
    </div>
    <div class="col-4 step text-center">
      <span class="circle text-white bg-secondary-dark border rounded-circle"
        >3</span
      >
      <p class="label text-white mt-2">付款成功</p>
    </div>
  </div>
</div>

此處為CSS樣式

/* Styles for the progress steps */
.signup {
  .step {
    position: relative;
  }

  .step .circle {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Ensure the circle is above the line */
    width: 28px; /* Fixed width */
    height: 28px; /* Fixed height to maintain the circle shape */
    border-radius: 50%;
  }

  /* Line between the steps */
  .step::before {
    content: "";
    position: absolute;
    top: 20%; /* Adjust the position to align the line with the center of the circles */
    height: 2px;
    background-color: white;
    z-index: 0; /* The line should be behind the circles */
    transform: translateY(-100%);
  }

  .step:first-child::before {
    display: none;
  }

  .step:nth-child(2)::before {
    left: -50%;
    width: 100%;
  }

  .step:last-child::before {
    left: -50%;
    width: 100%;
  }
}

步驟之間的線條

.step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: white;
  z-index: 0;
  transform: translateY(-50%);
}

1. content: ''：
   ::before 和 ::after 偽元素需要 content 屬性，即使它是空字符串。這一行就是用來創造一個空的線條。

2. position: absolute;：
   這意味著這個偽元素將被定位相對於其最近的擁有 position: relative 的父元素（在這裡是 .step）。這讓我們可以精確控制線條的定位

3. top: 50% 和 left: 50%：
   這會讓線條的左邊緣處於父元素的中心點。因為是 absolute 定位，所以可以控制具體位置。top: 50% 將線條放置在垂直中心

4. width: 100% 和 height: 2px：
   這些定義了線條的寬度和高度。寬度為 100%，意味著它將延伸到父元素的全寬度，height: 2px 則將其設為 2 像素的細線

5. transform: translateY(-50%)：
   這行確保白線垂直居中對齊到 .step 的中間，將它的垂直位置往上移動了 50%（它的高度的 50%），這樣就能精準地與圓圈對齊

特別處理第一個和最後一個步驟

.step:first-child::before {
  display: none;
}

display: none：這一行隱藏了第一個步驟左邊的線，因為第一個步驟不需要左邊的線。

.step:nth-child(2)::before {
  left: -50%;
  width: 100%;
}

left: -50%：這會讓偽元素從中點開始，然後延展到左邊，從而覆蓋整個步驟的寬度。

.step:last-child::before {
  left: -50%;
  width: 100%;
}

同樣的設置應用於最後一個步驟，確保線條在步驟之間延伸，而不是覆蓋或超出邊界。

child

1. first-child (第一個子元素)

• 定義：選擇父元素中第一個子元素
• 語法：element:first-child
• 用途：應用樣式到某個父元素中的第一個子元素

2. nth-child (第 N 個子元素)

• 定義：選擇父元素中的第 N 個子元素，N 可以是具體的數字、關鍵字（如 odd 或 even）或公式
• 語法：element:nth-child(n)
• 用途：應用樣式到某個父元素中第 N 個子元素。可以應用到所有子元素類型，而不僅僅是某個特定類型（如段落、列表項等）

3. last-child (最後一個子元素)

• 定義：選擇父元素中的最後一個子元素
• 語法：element:last-child
• 用途：應用樣式到某個父元素中的最後一個子元素

原來bootstrap有相關元件

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>