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

# 🏅 切版任務 Day20 - 偽元素

::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)

### 練習
嘗試運用偽元素在文字前呈現正方形樣式，
如圖：
> 
> 正方形寬高 10px，顏色 `#000000`

## 回報流程

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


<!--

解答：
https://codepen.io/hexschool/pen/OJBOrNE

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/JjmxMbd) |
| 2 | Eden.C#9359 |[Codepen](https://codepen.io/iseden/pen/ZEqwvOw)|
|3| DeLi#8324 |[Codepen](https://codepen.io/delichaomoon/pen/ExdroWY)|
| 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/oNamppz) |
| 5 | Daisy_Li#4231 |[Codepen](https://codepen.io/lidairong-gmail-com/pen/mdzvpWm)|
| 6 | 冬天#5215 |[Codepen](https://codepen.io/winter_/pen/qBJgpgR)|
| 7 | jia yu#8896 |[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/oNamprw)|
| 8 | 泊岸#3466 |[Codepen](https://codepen.io/qoq77416416/pen/bGmzaZQ?editors=1100)|
| 9 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/oNamEge)|
| 10 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/YzJdJER)|
| 11 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/ExdrQVN?editors=1100)|
| 12 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/RwevQRJ)|
| 13 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/KKGJQqp?editors=1100)|
| 14 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/RwevQry)|
| 15 | Tina02#2691 | [codepen](https://codepen.io/Tina02/pen/KKGJQGz)
| 16 | Ann Chou#0146 | [codepen](https://codepen.io/annchou_illu/pen/YzJBYaV)
| 17 | Jacky7035#9423 | [codepen](https://codepen.io/adens123/pen/bGmzLQN)
| 18 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/YzJBeLO) |
| 19 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/JjmxpZp) |
| 20 | gahwa#3562 | [Codepen](https://codepen.io/iseden/pen/ZEqwvOw) |
| 21 | youtown#0797 | [Codepen](https://codepen.io/youtown/pen/OJBoVqO) |
| 22 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/mdzvxyZ) |
| 23 | 銀光菇#1692 | [codepen](https://codepen.io/genesynthesis/pen/NWOoYWN)|
| 24 | henrykgb#5749 |[codepen](https://codepen.io/henrymorgan666/pen/jOedzmm)
| 25 | 姜承#8204 |[codepen](https://codepen.io/Troy0718/pen/KKGJoyX)
| 26 | CuraLin#2648 |[codepen](https://codepen.io/curalin/pen/bGmzvQR)
| 27 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/KKGJRjj) |
| 28 | vvay#4113 | [CodePen](https://codepen.io/pellmssx-the-sasster/pen/poxGVqm) |
| 29 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/YzJBvqe) |
| 30 | DoryH#0526 | [Codepen](https://codepen.io/dorihung/pen/NWOoBKx) |
| 31 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/JjmxvgE) |
| 32 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/rNqPrdr) |
| 33 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX) |
|34 | wiimax#4564|[Codepen](https://codepen.io/willismax/pen/VwEgGYe)
|35 | Aritan#1931|[Codepen](https://codepen.io/Aritan/pen/GRYzBaj)
| 36 | N0c7iluc3n7#4390 |[Codepen](https://codepen.io/huang-yu-cheng/pen/KKGJxgx)|
| 37 | Ting.66#0912 |[Codepen](https://codepen.io/Ting66/pen/VwEgGyP?editors=1100)|
| 38 | Akira#9996 |[Codepen](https://codepen.io/Akira-Chen/pen/zYmembE)|
| 39 | 兔子#6746 |[Codepen](https://codepen.io/CarrotDetector/pen/KKGJGrz)|
| 39 | 司機叔叔#2463 |[Codepen](https://codepen.io/bigv5566/pen/KKGJbjL)|
| 41 | snow#0255 |[Codepen](https://codepen.io/snow21723/pen/jOeddEo)|
| 42 | HsuanTang#1349 |[Codepen](https://codepen.io/HsuanTang/pen/Jjmxxrr)|
| 43 | 浪裡小白龍#6860 |[Codepen](https://codepen.io/Emillo/pen/poxGYZp?editors=1100)|
| 44 | David0799#4415 |[Codepen](https://codepen.io/David0799/pen/ExdrJgB)|
| 45 | Yuu#5361 |[Codepen](https://codepen.io/alycehwy/pen/jOedRdd)|
| 46 | Jennifer Chuang#3937 |[Codepen](https://codepen.io/yujhen/pen/dygagjK)|
| 47 | Hao#2485 |[Codepen](https://codepen.io/Seanfeb16/pen/NWOorKr)|
| 48 | peihsuan#6315 |[Codepen](https://codepen.io/peihsuanlai/pen/GRYzadP)|
| 49 |翔.#0859 |[Codepen](https://codepen.io/energy95272z/pen/jOeJOOr)|
|50|HsienLu#8316|[COdepen](https://codepen.io/Hsienlu/pen/KKGEdqm)|
|51|satarkuo#5736|[COdepen](https://codepen.io/SatarKuo/pen/wvYOKLd)|
| 52 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/ExdMyEe) |
| 53 | alan0305#2423 | [Codepen](https://codepen.io/alan0305/pen/dygrpMo) |
| 54 | yoyo#1003 | [Codepen](https://codepen.io/pen/WNamjXq) |
| 55 | YHT#1696 | [Codepen](https://codepen.io/YHT31/pen/rNqRjYJ) |
| 56 | QOO#8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/gOBEGeQ?editors=1100) |
| 57 |Syrena#3897|[Codepen](https://codepen.io/Syrena-Chung/pen/ZEqPvWM)
|58|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/LYgaQdz)
|59|小魚#8614|[CodePen](https://codepen.io/gizelliang/pen/jOeJeYg)
| 60 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/qBJvLrW) |
| 61 | moins13#3346 | [Codepen](https://codepen.io/kyechen13/pen/RwedELG) |
| 62 | 長方形#9612 | [Codepen](https://codepen.io/imjjw/pen/poxYGJB) |
| 63 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/qBJvgMP) |
|64|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/BaqbbJN)|
|65|penny#6214|[Codepen](https://codepen.io/penny8989/pen/ZEqPZZN)|
|66|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/PoygYGe)|
|67|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/BaqEQOv)|
|68|Sonia Wu#7154|[Codepen](https://codepen.io/YUJOU/pen/JjmVJdO?editors=1100)|
|69|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/BaqEdEm)|
|70|小華#3204|[Codepen](https://codepen.io/franfranfran/pen/poxBdZe?editors=1100)|
|71|史滴芬#4310|[Codepen](https://codepen.io/steven870107/pen/zYmXYEp)|
|72|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/zYmXbKw)|
|73|雲漢#5319|[codepen](https://codepen.io/keon981/pen/KKGYLLP)|
|74|鄭舜仁#6606|[codepen](https://codepen.io/randomno/pen/poxBXdb)|
|75|Snadra#1987|[codepen](https://codepen.io/mlqmhltg/pen/NWOVWXP)|
|76|JasonChang#7847|[codepen](https://codepen.io/jsonChangJava/pen/abRrzre)|
|77|townyuan#2653|[codepen](https://codepen.io/townyuan/pen/OJBYPdm)|
|78|Yvonne#2721|[codepen](https://codepen.io/Evonne/pen/qBJGZMR)
|79|wendyli#2155|[codepen](https://codepen.io/rockayumitw/pen/Poyvzoy)
|80|歐陽龍龍#1061|[codepen](https://codepen.io/dizzydog-rgb/pen/RwemGOR)
|81|lishuan#3698|[codepen](https://codepen.io/lishuan/pen/yLRWgXO)
|82|Kulimusoda#2785|[codepen](https://codepen.io/yuch3n_chen/pen/abRrLGd?editors=1100)
|83|杰_jie#9088|[codepen](https://codepen.io/hmj8805/pen/XWxwVvG?editors=1100)
|84|liam9930#4129|[codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/VwEOQrP) |
| 85 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/ExdBVYK) |
| 86 | FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/NWOZxqG) |
| 87 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/jOejPKQ) |
| 88 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/vYVqoEV) |
| 89 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/bGmXMBb) |
| 90 | Joanne Hu#0010 | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/vYQBYOg) |
| 91 | 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/VwVZNpQ) |
| 92 | weiting#3489 | [Codepen](https://codepen.io/weiting14/pen/Jjejmra?editors=1100) |
| 93 | yuling#1634 |[codepen](https://codepen.io/igzdflpu/pen/gOQaogm)|
| 94 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/NWOVwEq)|
| 95 | cmlb0212 |[Codepen](https://codepen.io/Chungmin0212/pen/QWJyxBR)|
| 96 | Rong |[Codepen](https://codepen.io/Loonng/pen/KKrzVZZ?editors=1100)|
| 97 | 初心#9021 |[Codepen](https://codepen.io/Sylviax/pen/MWzbwPq?editors=1100)|
| 98 | 小明#4408 |[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/YzRarrb)|
| 99 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/WNYgoZm)|