---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day21 - 偽元素練習

# 偽元素介紹
偽元素（pseudo-element）是一種用來針對元素的特定部分進行樣式設定的方法。
它看起來像是新增了額外的 HTML 標籤，但實際上並沒有真正改變 HTML 結構。

常見用途包括：

* 在元素前後加裝飾（像小圖示、引號）
* 美化文字的首行或首字
* 做一些細部排版
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅偽元素練習 - 範例 1" src="https://codepen.io/yen-kg/embed/XJJmeMw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/XJJmeMw">
每日任務 - 🏅網站工具整合 - GA 題目</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### **注意，content 是必填的，不然偽元素不會顯示**

比較常見的偽元素有下面這幾個：
1. `::before` 在元素內容前面插入內容
2. `::after` 在元素內容後面插入內容
3. `::placeholder` 針對表單輸入框的提示文字設定樣式

另外也可以利用偽元素的方式去產生出線條，下面的題目也請同學練習看看唷！
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅偽元素練習 - 範例 2" src="https://codepen.io/yen-kg/embed/XJJayzX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/XJJayzX">
每日任務 - 🏅偽元素練習 - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/WbbEYdm) 模板，並且替 .card-title 利用偽元素的方式加上線條。如下圖所示：


## 回報流程

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


<!--

解答：
.card-title::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 4px;
background-color: #0056d2;
border-radius: 2px;
}
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/VYLwEpN)
|02| Saika|[Codepen](https://codepen.io/saika4501/pen/PwqoyJP)|
| 03 | Dean |[Codepen](https://codepen.io/ch933114/pen/LEVYgzq)|
| 04 | akkk |[Codepen](https://codepen.io/ak-wu-the-decoder/pen/xbGxyoe)|
| 05 | kelsonhouse |[Codepen](https://codepen.io/Kelson-House/pen/ByNaqEp?editors=1100)|
| 06 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/PwqoxoW)|
| 07 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/QwbWJpr)|
| 08 | NAOJUN |[Codepen](https://codepen.io/NAOJUN/pen/ogXNQBj)|
| 09 | pastor |[Codepen](https://codepen.io/peter_hung/pen/YPXzRNW)|
| 10 | Aoi |[Codepen](https://codepen.io/zching07/pen/azObQwo)|
| 11 | 謝天 |[Codepen](https://codepen.io/crisxie/pen/ByNaGdm)|
| 12 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/KwpKrqx)|
| 13 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/LEVYgQa)|
| 14 | Yu(light_2020_03026) | [Codepen](https://codepen.io/Yu_Chang/pen/QwbWJqB)|
|15|JHT|[Codepen](https://codepen.io/juanht/pen/myJdzNP)|
| 16 | An|[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/yyNLQjZ)|
| 17 | B |[Codepen](https://codepen.io/Babel777/pen/wBavQry)|
| 18 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/vEOYvPQ)|
| 19 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/JodjzeX?editors=1100)|
| 20 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/jEPORoW)|
| 21 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/JodPKQy)|
| 22 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/zxGYXyz)|
| 23 | 阿龍 |[Codepen](https://codepen.io/Nemo-Lin/pen/ByNaeYK)|
| 24 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/myJdYqb)|
| 25 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/EajxBaM)|
| 26 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/GgJRbJj)|
| 27| 7Lun |[Day-21 Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/myJdZOO)|
| 28| Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/PwqoryE)|
| 29 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/gbpYPdY)|
| 30 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/wBavLLx)|
| 31 | ggininder |[Codepen](https://codepen.io/wei900221/pen/QwbWevX)|
| 32 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/PwqoMmy)|
| 33 | zhe |[Codepen](https://codepen.io/dotheright/pen/QwbWeXj)|
| 34 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/bNdNbrp)|
| 35 | WAWATA |[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/zxGOLpG)|
| 36 | andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/MYwYWLd)|
| 37 | Lanmei |[Codepen](https://codepen.io/Lanmei-CodePen/pen/NPqPWOB?editors=1100)|
|38|蛋殼|[Codepen](https://codepen.io/weybrian/pen/GgJgggQ)
|39 | carrie0416 |[Codepen](https://codepen.io/Hong-Carrie/pen/WbvbboW)|
| 40 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/bNdNNpO)|
| 41 | HawkeyeLin |[Codepen](https://codepen.io/long-long/pen/YPXPXVM)|
| 42 | Zing |[Codepen](https://codepen.io/TZU-YIN-WANG/pen/VYLYLGJ)|
| 43 | Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/MYwYwzQ?editors=0100)|
| 44 | Daniel Haung |[Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/QwbwGOG)|
| 45 | jingle0900|[Codepen](https://codepen.io/EvaLi0472/pen/KwpwNJX)|
| 46 | DD |[Codepen](https://codepen.io/dorihung/pen/NPqPdLM)|
| 47 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/JodoWay)|
| 48 | Aidd. |[Codepen](https://codepen.io/aiddchen/pen/zxGxwYd)|
| 49 | kururu110 |[Codepen](https://codepen.io/ecqyjuck-the-decoder/pen/EajamZQ)|
| 50 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/wBaBedq?editors=1100)|
|51|小趴|[Codepen](https://codepen.io/papa2415/pen/wBaBqEZ)|
| 52 | tina01170 |[Codepen](https://codepen.io/tina-huang-the-bashful/pen/qEdEvoB)|
| 53 | 富 |[Codepen](https://codepen.io/spring40747/pen/EajjvmV)|
| 54 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/yyNNvmo?editors=1100)|
| 55 | 消波塊 |[Codepen](https://codepen.io/PaulHsiao/pen/myJJoor)|
| 56 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/jEPEydQ)|
| 57 | Jane |[Codepen](https://codepen.io/jkmx/pen/ZYGEMop)|
| 58 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/KwpVmNj)|
| 59 | kent_31665 |[Codepen](https://codepen.io/kentlee406/pen/QwbyVRV)|
| 60 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/QwbNJZN)|
| 61 | William Hsieh |[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/zxGZOQM?editors=1100)|
| 62 | mercury2508. |[Codepen](https://codepen.io/Mercury2508/pen/jEPBONY)|
| 63 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/ByNRwRX)|
| 64 | Astrid |[6/7](https://codepen.io/astrid321654/pen/gbpxqyZ?editors=1100)|
| 65 | haohaoliao |[Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/KwpXwLG?editors=1100)|
| 66 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/ogXENEe) |
| 67 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/OPVoxzr)|
| 68 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/wBaEyME)|
<!--
| number | name |[Codepen]()|
-->