--- 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) ### 練習 嘗試運用偽元素在文字前呈現正方形樣式, 如圖: > ![](https://i.imgur.com/aQACNb4.png) > 正方形寬高 10px,顏色 `#000000` ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 (也可以將答案直接貼至「回報區」) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: 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)|
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up