---
# System prepended metadata

title: "\U0001F3C5 Day 18"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 18

## 偽元素 - 第二週 About 圓點

可以參考下方文章，認識並學習如何使用偽元素：
- [參考文章1](https://wcc723.github.io/css/2013/09/22/css-pseudo-element/)
- [參考文章2](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html)

複製下方程式碼，修改 `...` 部分，嘗試製作[第二週主線](https://xd.adobe.com/view/27f2c1f7-6c48-42b5-a5fa-6db8eec461a5-72a1/) About 區塊內圓點（如圖樣式）

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

HTML：
```htmlembedded=
<p class="dot">Graphic Designer</p>
```

CSS：
```css=
body {
  font-family: Roboto, sans-serif;
}

p {
  font-size: 24px;
  line-height: 42px;
  font-style: italic;
  font-weight: 700;
}

.dot {
  display: flex;
  align-items: center;
}

.dot::before {
  ...
  width: 22px;
  height: 22px;
  ...
  ...
  ...
}
```
> 記得載入 Google fonts 字型

## 回報流程

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

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

<!-- 解答：https://codepen.io/hexschool/pen/vYRNaZa -->


回報區
---


|      Discord      |                               CodePen / 答案                               |
|:-----------------:|:--------------------------------------------------------------------------:|
|    薏慈#3795 |             [CodePen](https://codepen.io/its_wang/pen/poLZgYZ)              |
|    小鐵#2814 |             [CodePen](https://codepen.io/xiron/pen/GRxmzBd)              |
|   Anna Liu#3794   |             [CodePen](https://codepen.io/anna618/pen/gOeWYyq)              |
|     𝓛𝓊𝒸𝓎#8635     |             [CodePen](https://codepen.io/lucygirl/pen/QWmyKBg)             |
|     小白#2406     |            [CodePen](https://codepen.io/gracewhite/pen/XWEMGyY)            |
|   CloThEs#2406    |             [CodePen](https://codepen.io/CloThEsZ/pen/VwXpNra)             |
|     Chi#7605      |             [Codepen](https://codepen.io/YoChi84/pen/KKoWYrr)              |
|    布魯諾#7239    |             [Codepen](https://codepen.io/bruno-yu/pen/ZExeZmZ)             |
|     zera#6060     |            [codepen](https://codepen.io/zera-tseng/pen/mdxWgYM)            |
|    黃士桓#7654    |          [codePen](https://codepen.io/shr-huan-huang/pen/WNzpBea)          |
|    Clara#1275     |             [CodePen](https://codepen.io/bsupixqu/pen/ExEWzYj)             |
|    黑白兔#0684    |            [CodePen](https://codepen.io/johnny329/pen/XWEMwrW)             |
|    JackC#0411     |             [CodePen](https://codepen.io/key0329/pen/vYRxwEJ)              |
|   WEI_RIO#9342    |       [CodePen](https://codepen.io/wei_wu/pen/VwXpOaW?editors=1100)        |
|    azami#5986     |              [CodePen](https://codepen.io/azami/pen/RwMpmNL)               |
|     洋蔥#5295     |        [CodePen](https://codepen.io/HSUNA/pen/eYMvaZY?editors=1100)        |
|  christina#6185   |            [Codepen](https://codepen.io/chrisc0210/pen/GRxWaqx)            |
|   LinaChen#1796   |             [CodePen](https://codepen.io/LinaChen/pen/wvmJbGE)             |
| bonnieli1414#4906 |    [CodePen](https://codepen.io/bonnieli1414/pen/WNzpBRm?editors=1100)     |
|  PeggyLiao#1552   |     [CodePen](https://codepen.io/PeiJu-Liao/pen/vYRxwWR?editors=1100)      |
|     Hsiu#8767     |             [CodePen](https://codepen.io/amy-hsiu/pen/NWYpVMV)             |
|   Amberhh#2465    |       [CodePen](https://codepen.io/Amberhh/pen/xxWqNjd?editors=0110)       |
|      YI#0863      |       [CodePen](https://codepen.io/YI0305/pen/abYJrVp?editors=1100)        |
|     L0F0#8733     |        [CodePen](https://codepen.io/l0f0/pen/jOzBoQO?editors=0100)         |
|    阿翰 #1984     |            [Codepen](https://codepen.io/JohnHan05/pen/YzaZbBv)             |
|     威爾#1694     |             [CodePen](https://codepen.io/WILL_Wu/pen/ExEWzMX)              |
|   Jenny真#7532    |     [CodePen](https://codepen.io/wei-chen-wu/pen/poLempo?editors=1100)     |
|    Arista#5802    |           [CodePen](https://codepen.io/arista-hsieh/pen/eYMvwzR)           |
|    JarDar#6980    |            [codepen](https://codepen.io/jardarpen/pen/eYMvwgE)             |
|     int#7518      |             [Codepen](https://codepen.io/intHuang/pen/LYdWKRB)             |
|     Ke #1391      |            [Codepen](https://codepen.io/federerke/pen/ZExedpK)             |
| Ryan Chiang#6649  |            [Codepen](https://codepen.io/ryanchiang/pen/gOemNxY)            |
|    紙飛機#1335    |           [Codepen](https://codepen.io/paperplanea/pen/OJvpeoM)            |
|    Benson#6763    |             [Codepen](https://codepen.io/kumashow/pen/yLKMdxz)             |
|     小諾#1866     |             [Codepen](https://codepen.io/noichan/pen/qBorzYQ)              |
|    mickey#8745    |           [Codepen](https://codepen.io/weizhetseng/pen/YzaZoBm)            |
|    leeli#6243     |      [Codepen](https://codepen.io/leelilee/pen/WNzpqLp?editors=1100)       |
|   Tuhacrt#0008    |             [Codepen](https://codepen.io/Tuhacrt/pen/zYWZVVm)              |
|     Vera#5592     |              [Codepen](https://codepen.io/skvera/pen/JjLWgWg)              |
|     yuyu#6310     |      [Codepen](https://codepen.io/yuyu0905/pen/mdxWNmr?editors=1100)       |
|  Yuna Huang#2692  |             [Codepen](https://codepen.io/Yuna1002/pen/bGvqXoY)             |
|  jin.huang#4666   |      [Codepen](https://codepen.io/haha1196/pen/bGvqXOM?editors=1100)       |
|    Joyce#3790     |            [Codepen](https://codepen.io/joycehuang/pen/qBoreyd)            |
|  Potatolee#7749   |            [Codepen](https://codepen.io/potatoleee/pen/VwXpoze)            |
|  Clara Cai#7097   |           [Codepen](https://codepen.io/Clara-Snowy/pen/QWmpaba)            |
|  kevin8349#6131  |             [Codepen](https://codepen.io/kun8349/pen/poLPzzY)              |
|   Fanglin #4054   |           [CodePen](https://codepen.io/flynn841028/pen/GRxmKJy)            |
|      痴醉兔       |             [CodePen](https://codepen.io/wei-nie/pen/JjLNPOW)              |
|     雷雷#7844     |            [CodePen](https://codepen.io/lei-yi-jie/pen/eYMWObd)            |
|     QOO#8446      |       [CodePen](https://codepen.io/QOOQOOQ/pen/yLKMmmr?editors=1100)       |
|   Daisy_Li#4231   | [CodePen](https://codepen.io/lidairong-gmail-com/pen/PoRmYyX?editors=1100) |
|     群嘉#3943     |       [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/qBomBOo)       |
|  suihsilan#9485   |            [CodePen](https://codepen.io/suihsilan/pen/YzaVPyP)             |
|   EmilyLin#0526   |       [CodePen](https://codepen.io/c199615/pen/NWYjPzY?editors=1100)       |
|   ajhappy#6488    |           [CodePen](https://codepen.io/ajhappy5438/pen/abYWzeO)            |
|  Karol-Kuo#5287   |           [CodePen](https://codepen.io/ting-yu-kuo/pen/OJvmPeQ)            |
|    hungya#0773    |            [CodePen](https://codepen.io/hungya777/pen/YzaVXBv)             |
|    toshow#5609    |              [CodePen](https://codepen.io/toshow/pen/OJvmyXK)              |
|    鉦勝 #8333     |            [CodePen](https://codepen.io/atckmax823/pen/MWVmKgQ)            |
|  我是泇吟 #5189   |             [Codepen](https://codepen.io/kljuqbxs/pen/PoRmZRj)             |
|      YC#2522      |               [CodePen](https://codepen.io/YCLu/pen/gOeWrPv)               |
|    Yunei#6323     |              [Codepen](https://codepen.io/Yunei/pen/VwXbarr)               |
|   IreneY #0086    |        [codepen](https://codepen.io/HalfPlannedJourney/pen/MWVmeJp)        |
|     LINK#1933     |             [codepen](https://codepen.io/miyayoe/pen/dymWXZw)              |
|    SASIMI#5099    |           [codepen](https://codepen.io/sashimi1327/pen/KKoaXRz)            |
|     piha#9987     |             [Codepen](https://codepen.io/pihahaha/pen/dymWXQL)             |
|    楓之聲#6945    |            [Codepen](https://codepen.io/sshane258/pen/gOegGQN)             |
|  Sentiments#4883  |            [codepen](https://codepen.io/Sentiments/pen/vYRmXZL)            |
|     yu魚#1330     |              [CodePen](https://codepen.io/Yu_yu/pen/gOeWaJa)               |
|    ssozr#4680     |              [codepen](https://codepen.io/ssozr/pen/JjLNRVY)               |
|   Yuan962#5897    |           [Codepen](https://codepen.io/Jasmine-Liao/pen/BarRQzV)           |
|     大衛#4869     |          [Codepen](https://codepen.io/shr-huan-huang/pen/WNzpBea)          |
|     YU #0618      |              [Codepen](https://codepen.io/yoken_/pen/mdxmRNy)              |
|    Mylène#2481    |           [Codepen](https://codepen.io/hamajibashi/pen/eYMWvXo)            |
|  Iris Huang#6727  |             [CopdePen](https://codepen.io/ythuang/pen/wvmdPwb)             |
|   Jamie Wu#9345   |             [CodePen](https://codepen.io/Wu220103/pen/PoRmQBd)             |
|jeter#8014         |    [CodePen](https://codepen.io/gi-tai-she/pen/RwMVMoE?editors=1100)        |
| Ron Liang#7277    |              [CodePen](https://codepen.io/ron-go/pen/VwXbQEy)               |
| 瑞瑞#4605 | [CodePen](https://codepen.io/tsai-li-ting/pen/poLPLrE?editors=1111)     |
| s339428326#7402 | [CodePen](https://codepen.io/s339428326/pen/YzaVamm)     |
| Henry#7386| [CodePen](https://codepen.io/h1nr9/pen/ZExKoqV)  |
| Melon#0380| [CodePen](https://codepen.io/BalaFang/pen/gOeWjjY)  |
| WEI#0797| [CodePen](https://codepen.io/wei-z/pen/vYRmazM)  |
| 狸貓#5863| [CodePen](https://codepen.io/tanuki320/pen/RwMVYww)  |
|鴨鴨#9822|[Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/zYWwyNM)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/LYdyQEZ)|
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/RwMVmWV) |
| choubree#4350 | [CodePen](https://codepen.io/BreeChou/pen/jOzwbqE) |
| NeilLin#3009 | [CodePen](https://codepen.io/a0071421/pen/oNqWmOo) |
| Pony#6778 | [CodePen](https://codepen.io/Pony0303/pen/rNdwLvw) |
|bakiii|[codepen](https://codepen.io/aki168/pen/wvmeovp)|
|GARBO#6659|[codepen](https://codepen.io/garbo8130/pen/NWYgdwW)|
|咻蹦#1526|[codepen](https://codepen.io/emmasyu/pen/mdxwMjP?editors=1100)|
|Vian#7338|[codepen](https://codepen.io/vianwu31/pen/JjLJMZq?editors=1100)|
|yuchenye#6119|[codepen](https://codepen.io/yuchen/pen/oNqwqyy)|
|Tori#1248|[codepen](https://codepen.io/FlyTori/pen/oNqwRwx)|
|Nini Chen#5790|[codepen](https://codepen.io/ninistyle/pen/WNzOqVr?editors=1100)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/ExEvKMV)|
|Leo Song#8278|[Codepen](https://codepen.io/sunnylaba/pen/JjLyKWJ)|
|Van.CS|[codepen](https://codepen.io/fbacojji-the-selector/pen/jOzLVjJ)|
|肉魚#2149|[codepen](https://codepen.io/zoechen13/pen/BarZXjN)|
|阿蘇#8531|[codepen](https://codepen.io/susu8327/pen/gOexoqr)|
|Cream#3449|[codepen](https://codepen.io/frxdwbbi-the-sasster/pen/jOzLQob)|
| LHchien33#6232 |[codepen](https://codepen.io/lin_chien/pen/mdxMoRx)|
| Fang #4680 | [Codepen](https://codepen.io/std95174/pen/VwXzOop?editors=1100)|
| 艾草#4830 | [Codepen](https://codepen.io/jmkhsutp/pen/WNzZNjm)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/oNqGNGe)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/YzarNdL)|
| kancheng#3915| [CodePen](https://codepen.io/kancheng/pen/ZExaKvR)|
|逸川#6319| [CodePen](https://codepen.io/bryanlin8911/pen/WNzXZWd)
|Deborah#0033| [CodePen](https://codepen.io/deborah-tsai/pen/eYMeeBa)
|Carrie #2750| [CodePen](https://codepen.io/carrie-wang/pen/bGvYPJQ)|
|mei#8421| [CodePen](https://codepen.io/Shila-Chen/pen/YzaYzpG)|
|ROKA#4051| [CodePen](https://codepen.io/chengchiaoyi/pen/rNdpXyO?editors=1100)|
|rueee#7997| [CodePen](https://codepen.io/Jull-C/pen/ZExrKbB)|
|Jumpye#8601| [CodePen](https://codepen.io/Jumpye/pen/LYdQKjw?editors=1100)|
|sophiee|[codepen](https://codepen.io/sophiee2727/pen/ExEQqYY)
|Manson許#2295|[codepen](https://codepen.io/oupbzfxq-the-scripter/pen/gOeerKN)
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/GRxxGZX?editors=1100) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/XWExvqz)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/MWVzQBX)|
|Bonnie邦妮#7529|[CodePen](https://codepen.io/Calista316/pen/wvmQQNY)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/rNdQozj)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/YzaRBNo)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/WNJvdRL)