### 偽元素基本介紹

偽元素是分別在元素前（使用 `::before`）、元素後（使用 `::after`）新增元素，通常會運用在一些裝飾性樣式上，在使用時一定要加入 `content: ""`（建立一個元素的實體） 。

>偽元素不是真正建立於網頁內的元素，但其又能表現如同真正的元素。

可以參考下方文章，更進一步理解如何使用偽元素：
- [::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before)
- [::after](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after)

### 偽元素基本運用
複製下方程式碼，修改 `...` 部分，嘗試製作第六週中的日期部分（如圖樣式）


HTML：

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3 col-lg-2 col-8 mx-auto">
      <div class="date d-flex flex-md-column flex-row align-items-center justify-content-between border border-3 border-dark position-relative">
        <div class="d-flex flex-column align-items-center">
          <h2 class="text-center">
            MAY
            <br>
            19
          </h2>
        </div>
        <div class="time d-flex flex-column justify-content-center align-items-center">
          <p class="mb-0 lh-1">12:00</p>
          <p class="mb-0 lh-1">|</p>
          <p class="mb-0 lh-1">20:00</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：
>RWD 的部分也需要做適當的處理

body {
  background-color: #f3f1e5;
  font-family: "Yeseva One", cursive;
}
h2 {
  margin: 0px;
  font-size: 22px;
}
.date {
  padding: 14px 24px;
}
.time::before {
  ...
}

@media (min-width: 768px) {
  h2 {
    margin-bottom: 126px;
    font-size: 48px;
  }
  p {
    font-size: 32px;
  }
  .date {
    padding: 48px 44px;
  }
  .time::before {
    ...
  }
}

>因 bootstrap 是 [mobile first](https://getbootstrap.com/docs/5.3/layout/breakpoints/#core-concepts) ，所以 RWD 的部分會使用 min-width 。

## 回報流程

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


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

回報區
---

| # | Discord | CodePen |
|:-:|:----------------------- |:----------------------|
| 01 | shcopy| [codepen](https://codepen.io/jmimiding4104/pen/MWzLPQV)|
| 02 | Eric | [codepen](https://codepen.io/wc-su/pen/abPojxY) |
| 03 | Yu | [codepen](https://codepen.io/yuch3n_chen/pen/wvRwxZa?editors=1100) |
| 04 | .icesam | [codepen](https://codepen.io/icesam/pen/KKbPxKW) |
| 05 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/OJrLoNy) |
| 06 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/poqzOvP) |
| 07 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/BavBPey) |
| 08 | townyuan | [Codepen](https://codepen.io/townyuan/pen/RwEbYWX)|
| 09 | bf-tsai | [Codepen](https://codepen.io/BF-Tsai/pen/gOZYdwp)|
|10|Moreene|[CodePen](https://codepen.io/Moreene/pen/WNLegjp)|
|11|SmallP|[CodePen](https://codepen.io/smallp/pen/GRPKXmJ)|
| 12 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/KKbPBJg) |
| 13 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 14 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/GRPKXzj)|
| 15 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/zYyOJXb?editors=1100) |
| 16 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/JjwPBzZ)|
| 17 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/dywbqEo)|
| 18 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/wvRwYrj)|
| 19 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/poqzxaY)|
| 20 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/wvRwYdm)|
| 21 | m_m | [Codepen](https://codepen.io/minnn7716/pen/PoXYyrd)|
| 22 | rjjq | [Codepen](https://codepen.io/rjjq/pen/GRPKwRB)|
| 23 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/dywbgKv)|
| 24 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/LYMPXOd) |
| 25 | awei | [Codepen](https://codepen.io/hong-wei/pen/RwEbELN) |
| 26 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/BavBGxX) |
| 27 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/zYyOyjM) |
| 28 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/poqzYjo?editors=1100)|
| 29 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/jOXNvEy)|
| 30 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/wvRwEQe) |
| 31 | Uli | [Codepen](https://codepen.io/uli1313/pen/poqzmpG) |
| 32 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/zYyOVvK) |
| 33 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/jOXNgWy) |
| 34 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/PoXoogM?editors=1100)|
| 35 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/MWZWWxp)|
| 36 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/BavajxL)|
| 37 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/poqoyZY) |
| 38 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/ZEVEOMB)|
| 39 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/BavaWZj)|
| 40 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/oNJNWbX?editors=1100)|
| 41 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/PoXoZMW)|
| 42 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/bGOGjrJ)|
| 43 | wind | [Codepen](https://codepen.io/wind7y/pen/XWoWoMV)|
| 44 | Jules_Hsu | [Codepen](https://codepen.io/cjntfsoq-the-animator/pen/gOZbOrz)|
| 45 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/BavaKeO?editors=1100)|
| 46 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/zYyxoMg?editors=1100)|
| 47 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/PoXwVyj?editors=1100)|
| 48 | PayRoom#8328| [CodePen](https://codepen.io/water38198/pen/eYbNgpa)
| 49 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/gOZpgve)|
| 50 | runweiting | [Codepen](https://codepen.io/weiting14/pen/vYvOxRv)|
| 51 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/WNLvZjj)|
| 52 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/MWZwrLm)|
| 53 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/vYvOVeY) |
| 54 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/jOXbGPM) |
| 55 | Long | [Codepen](https://codepen.io/Loonng/pen/vYvLEzr)|
| 56 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/oNJbZew?editors=1100)|
| 57 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/NWexgmz?editors=1100)|
| 58 | Randy | [Codepen](https://codepen.io/landy510/pen/KKbgqMM?editors=1100)|
| 59 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/LYMxNKW)|
| 60 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/JjwEyQQ)|
| 61 | sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/QWzpqeZ)|
| 62 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/wvReqzN)|
| 63 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/rNodMqZ?editors=1100)|

<!--
| 0 | user | [Codepen]()|
-->