---
# System prepended metadata

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

---

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

# 🏅 切版任務 Day20 - 標題偽元素裝飾

## 題目 

接續昨天的作業內容，建構出下圖「作品介紹」的部分

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

>可以參考這個[模板](https://codepen.io/jmimiding4104/pen/pomypOr)進行本日的作業。

>若對於偽元素還不太熟悉，可參考這個 [背景圖片](https://github.com/hexschool/2022-web-layout-training/blob/main/2024%20web-camp/title-deco-left-sm.png) 直接使用背景圖的方式將其呈現。


## 回報流程

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

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

<!-- 

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

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/eYaZezm) / TailwindCSS |
| 02 | Meng | [Codepen](https://codepen.io/menglin1203/pen/YzbqgrE) |
| 03 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/pomyYrM) |
| 04 | 詹姆士 |[Codepen](https://codepen.io/z111048/pen/ZENWPob?editors=1100)| 
| 05 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/XWwdGPj)|
| 06 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/mdYPoYz)|
| 07  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/RwmaOrE) |
| 08  | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/eYaZopg) |
|  09  | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/wvbGZaV) |
|  10  | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/dyEMLGj) |
|  11  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/MWdyRjJ) |
|  12  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/YzbqMZd) |
|  13  | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/OJYNGxJ?editors=1100) |
|  14  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/KKLzLKX) |
|  15  | Ariel| [Codepen](https://codepen.io/ariel0510/pen/KKLzYOv?editors=1100) |
|  16  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/gOJrJPr?editors=1100) |
|  17  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/bGypyvY?editors=1100)|
|  18  | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/abrNgrw)|
|  19  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/qBGNWwO) |
|  20  | peggy | [Codepen](https://codepen.io/peggy0419/pen/ZENOEYN) |
|  21  | kawa | [Codepen](https://codepen.io/z83xji6/pen/LYoZPwN) |
|  22  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/gOJMpMr) |
|  23  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/NWVrNaa) |
|  24  | Zander | [Codepen](codepen.io/chuangmaster/pen/mdYEPvW) |
|  25  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/YzbWPRb) |
|  26  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/LYoZyWK?editors=0100) |
|  27  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/zYQBzJB?editors=1100) |
|  28  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/dyEXRQV) |
|  29  | Emma | [Codepen](https://codepen.io/huang_L/pen/JjqXQeJ) |
|  30  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/ExzyoML) |
| 31 | 小趴 |[Codepen](https://codepen.io/papa2415/pen/GRaqxKm)|
| 32 | JY |[Codepen](https://codepen.io/jylee0805/pen/ExzypOy?editors=1100)|
|  33  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/NWVrZjB) |
|  34  | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/zYQBGNy) |
|  35  | Sonia | [Codepen](https://codepen.io/YUJOU/pen/bGywBGE) |
|  36  | boin | [Codepen](https://codepen.io/boinji/pen/xxNEqPX) |
|  37  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/MWdjoVd) |
|  38  | macihuang | [Codepen](https://codepen.io/macy1215/pen/gOJwvrO) |
|  39  | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/eYazYpq) |
| 40 | Hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/qBGavga) |
| 41 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/GRaNJyR?editors=1100) |
|  42  | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/dyEOJre) |
|  43  | Yini Chen | [Codepen](https://codepen.io/CYini/pen/mdYOpYQ) |
|  44  | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/XWwNqOp) |
|  45  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/NWVdNBN) |
|  46  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/QWRdOBQ?editors=1100) |
|  47  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/RwmpZqj?editors=1100) |
|  48  | LYC | [Codepen](https://codepen.io/LY-C/pen/mdYmNrV) |
|  49  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/ExzXKvK?editors=1100) |
|  50  | Anna  |[Codepen](https://codepen.io/Anna-Teng/pen/dyERRxL)|
|  51  | 勾小勻  |[Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/yLWXoep)|
|  52  | hao jing  |[Codepen](https://codepen.io/hjxu/pen/mdYqVrv?editors=1100)|
|  53  | Amy(咂摳)  |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/mdYqqMp?editors=1100)|
|  54  | Jainee  |[Codepen](https://codepen.io/Jainee0110/pen/dyEmZXx)|
| 55 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/jOoRgNZ) |
| 56 | maru3096 | [codepen](https://codepen.io/deamru/pen/JjQeRGV) |

---
<!--【快速複製】    
|  num  | user | [Codepen]() |
-- >

