---
# System prepended metadata

title: "\U0001F3C5 Day 17 - 偽元素"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 17 - 偽元素

偽元素允許你在不改變 HTML 結構的情況下，在元素周圍添加額外的樣式，雖然能實現的樣式內容與元素本體相近，但卻是依附於元素本體的存在，無法獨立存在，因此被稱為偽元素。

### 常用偽元素
- ::before：在元素內容的前面插入一個偽元素。
- ::after：在元素內容的後面插入一個偽元素。

### 使用方式
使用 ::before 和 ::after 偽元素時，必須設定 content 屬性，即使值為空字串也要設定 `content: ""`。
偽元素預設為行內元素 (inline element)，若要設定寬高或進行區塊級排版，需要將其轉換為區塊或行內區塊元素。

### 範例
HTML
```htmlembedded=
<p class="before-example">
  這段文字前面會多一個星號。
</p>

<p class="after-example">
  這段文字後面會多一個驚嘆號。
</p>
```
CSS
```css=
/* 用 ::before 在文字前面加東西 */
.before-example::before {
  content: "★"; /* 在內容前面加一個星號 */
  color: gold;
}

/* 用 ::after 在文字後面加東西 */
.after-example::after {
  content: "！"; /* 在內容後面加一個驚嘆號 */
  color: red;
}
```

### 題目
使用該 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/dPoYBQx?editors=1100)，依照註解指示透過偽元素將文字插入對應位置，完成圖如下
![](https://hackmd.io/_uploads/S1EIUZDMle.png)


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)
<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/vEONqaB?editors=1100
-->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/WbQeeYV) |
| 2 | 孟 | [Codepen](https://codepen.io/Mengru0503/pen/bNVbbZP) |
|  3  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/QwjLLXW) |
|  4  |  Shawn  |[Codepen](https://codepen.io/LiShang/pen/LEpPYPQ) |
|  5  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/qEOWBEx)|
|  6  | Jerome |[Codepen](https://codepen.io/qsc002163/pen/empOYNg?editors=1100)|
|  7  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/ZYbzEbL) |
|  8  | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/RNWbwgO?editors=1100) |
|  9  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/raOBNzG) |
|  10 |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/JoYPjJZ) |
|  11 |  牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/qEOWBjy?editors=1100) |
|  12 |  西娜 我們這一家好看  |[Codepen](https://codepen.io/Sheena-the-encoder/pen/ByoBamy?editors=1100) |
|  13  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/YPyKzbm?editors=1100) | 
|  14  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/bNVbNbg?editors=1100) |
|  15  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/YPyKPXz) |
|  16  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/wBKwBJe) |
|  17  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/xbwKbJK) |
|  18  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/PwPYwrO) |
|  19  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/myebJOp?editors=1100) |
|  20  |  Eagle Huang  |[Codepen](https://codepen.io/YuCi/pen/ByoBNqM) |
|  21  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/dPYbYja) |
|  22  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/wBKwKQG?editors=1100) |
|  23  |  Hao  |[Codepen](https://codepen.io/pen/) |
|  24  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=wBKwMYp) |
|  25  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/PwPYZxK?editors=1100) |
|  26  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/WbQerWy) |
|  27  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/EaVYKVj) |
|  28  |  Sid  |[Codepen](https://codepen.io/monkeybear721/pen/ZYbzWLz?editors=1100) |
|  29  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/MYagyXY) |
|  30  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/azvoZaK?editors=1100) |
|  31  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/yyYBJxX?editors=1100) | 
|  32  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/raOBMJP?editors=1100) | 
|  33  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/GgpKjBW) |
|  34  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/GgpKrJP?editors=1100) |
|  35  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/yyYBgKM) |
|  36  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/yyYBgGo) |
|  37  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/PwPYpbG) |
|  38  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/jEbNmwJ) |
|  39  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/wBKwdOO?editors=0100) |
|  40  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/ZYbzJzr) |
|  41  |Saika|[CodePen](https://codepen.io/saika4501/pen/ByoBxEm)|
|  42  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/ZYbzMjq?editors=1100) |
|  43  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/bNVbzrx) |
|  44  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/ogjvVey?editors=1100) |
|  45  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/JoYjKmv) | 
|  46  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/gbaOWYm?editors=1100) |
|  47  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/KwdKmar) | 
|  48  |  Evelyn  |[Codepen](https://codepen.io/liwenchiou/pen/QwjWqrz) | 
|  49  |  suemma  |[Codepen](https://codepen.io/suemma/pen/yyYLreb) | 
|  50  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/yyYLWLq?editors=1100) | 
|  51  |  Scrooge  |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/ZYbYYya) |
|  52  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/KwdwpdR) |
|  53  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/ZYbYvxv) |
|  54  |  kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/XJmbGEm) |
|  55  |  B  |[Codepen](https://codepen.io/Babel777/pen/ZYbbJXp) |
|  56  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/NPGxNQv?editors=1100) |
|  57  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/YPywVRK) |
|  58  |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/jEbWpGK) |
|  59  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/vENLvMz?editors=1100) |
| 60 | water |[Codepen](https://codepen.io/wateruby/pen/EaVPzaw)|
|61|小趴|[Codepen](https://codepen.io/papa2415/pen/zxvqwLW)|
|  62  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/azvBOWZ?editors=1100) |
|  63  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/VYvmMLP?editors=1100) |
|  64  |  tanuki_狸貓  |[Codepen](https://codepen.io/tanuki320/pen/GgprWGq?editors=1100) |
|  65  |  Lucy  |[Codepen](https://codepen.io/Lucytrycode/pen/RNWKzKJ) |
|  66  |  cindy  |[Codepen](https://codepen.io/a50134/pen/QwjgQaM) | 
|  67  |  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/azvLRrj) |
|  68  |  maerc  |[Codepen](https://codepen.io/Lu-Liangyu/pen/WbQYeoN?editors=1100) |
|  69  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/XJXdgxj?editors=1100) |



<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->