---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day19 - 偽元素"
tags: [軟體工程師體驗營 - 2024]

---

---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day19 - 偽元素

::before、::after 分別是在元素前、後新增一個假的元素，偽元素預設為行內元素，通常會運用在一些裝飾性樣式上，使用偽元素時，務必加入 `content: ""` 屬性

可以再參考下方文章，認識並學習如何使用偽元素：
- [CSS 沒有極限 - 別忘了偽元素](https://wcc723.github.io/css/2013/09/22/css-pseudo-element/)
- [::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before)、[::after](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after)

### 練習
嘗試運用偽元素呈現下方的設計(2B經驗下方的橫線)，
如圖：
![](https://imgur.com/EnjyTtU.png)
> 可透過此[模板](https://codepen.io/jmimiding4104/pen/BaEepoP)在 ... 處新增內容，
> 可參考設計稿中的作品集部分從零開始設計。






## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
https://codepen.io/jmimiding4104/pen/MWRdjqr

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Meng | [Codepen](https://codepen.io/menglin1203/pen/xxNVqRj) |
| 2 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/oNRxZeJ) |
| 3 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/WNBwpXG)|
| 4 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/eYaZvMy)|
| 5 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/vYwGxpq)|
| 6 | zaoannihao| [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/KKLzWaN)|
| 7 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/OJYNpgP) |
| 8 | 詹姆士 |[Codepen](https://codepen.io/z111048/pen/PovNpeq) |
| 9 | Jiahe |[Codepen](https://codepen.io/Andywang-95/pen/WNBwpYp?editors=1100) |
| 10 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/ExzKWBO) |
| 11 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/LYoNWwK)|
| 12 | jerry |[Codepen](https://codepen.io/sony791210/pen/zYQqwdQ)|
| 13 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/vYwGmdy) |
|  14  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/GRaZmdm) |
| 15 | han | [Codepen](https://codepen.io/iamHanCheng/pen/LYoNymp?editors=1100)|
| 16 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/oNRxwqo)|
| 17 | JY | [Codepen](https://codepen.io/jylee0805/pen/OJYNggB)|
| 18 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/WNBwOVb) |
| 19 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/NWVNvOb) |
|  20  | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/abrNwod) |
|  21  | Emma | [Codepen](https://codepen.io/huang_L/pen/PovNjLL) |
|  22  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/bGyporY) |
|  23  | peggy | [Codepen](https://codepen.io/peggy0419/pen/QWRNOzW) |
|  24  | Camila | [Codepen](https://codepen.io/camilalo/pen/xxNVPwO) |
|  25  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/rNgeJPE) |
|  26  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/wvbGmOb) |
|  27  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/GRaZxbP) |
|  28  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/xxNVjMQ) |
|  29  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/yLWOErZ?editors=1100) |
|  30  | Andy_12 | [Codepen](https://codepen.io/lifann/pen/LYoNgRw) |
|  31  | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/ZENWZzp) |
|  32  | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/LYoNvpd) |
|  33  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/PovNgzv?editors=0110) |
|  34  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/mdYPgYy) |
|  35  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/NWVNVKp) |
|  36  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/jOoqdvp?editors=1100) |
|  37  | kawa | [Codepen](https://codepen.io/z83xji6/pen/GRaqKbv) |
|  38  | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/pomydgm) |
|  39  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/OJYXPbe) |
| 40 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/ZENOyvE)|
| 41 | boin | [Codepen](https://codepen.io/boinji/pen/ExzyLJL)|
| 42 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/xxNOoyE?editors=0012)|
|  43  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/LYoRZYE) |
|  44  | Sonia | [Codepen](https://codepen.io/YUJOU/pen/dyEppEQ?editors=1100) |
|  45  | macihuang | [Codepen](https://codepen.io/macy1215/pen/YzbGYbd) |
|  46  | ss585801 | [Codepen](https://codepen.io/ss585801/pen/GRajXYz?editors=1100) |
| 47 | Hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/NWVRJwM) |
| 48 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/xxNRGbW) |
| 49 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/abrBmxL) |
| 50 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/wvboaEz) |
| 51 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/XWwNzxv) |
| 52 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/jOoVYYg) |
| 53 | Ted | [Codepen](https://codepen.io/bomtovou-the-animator/pen/PovbBQj) |
|  54  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/NWVNaWg?editors=1100) |
|  55  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/yLWgOpg) |
| 56 | Eden |[Codepen](https://codepen.io/iseden/pen/ExzZoWj)|
|  57  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/LYoWjeZ) |
|  58  | LYC | [Codepen](https://codepen.io/LY-C/pen/jOomgQp) |
| 59 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/xxNrZBx) |
|  60  | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/NWVggEN)|
|  61  | 勾小勻 |[Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/dyERzoE)|
|  62  | Taiwanno1 |[Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/LYozwgM)|
|  63  | hao jing |[Codepen](https://codepen.io/hjxu/pen/vYwWLEz?editors=1100)|
|  64  | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/rNgYGRb?editors=1100)|
|  65  | Jainee |[Codepen](https://codepen.io/Jainee0110/pen/JjqLyYG)|
| 66 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/LYogvrM) |
| 67 | maru3096 | [Codepen](https://codepen.io/deamru/pen/mdZQExN) |



---

<!--

-->