---
# System prepended metadata

title: CSS 9. Pseudo Elements / 偽元素
tags: [2022 網頁開發全攻略教程 / CSS篇章]

---

# CSS 9. Pseudo Elements / 偽元素


### ::befere 

- 於指定的元素之前，加入一個為元素。

- 例如我們針對我們網頁的 h1 做設定:

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


```
h1::before {
  content: ">>";
}

```

- 透過此語法，可以在網頁裡每個 h1 前面設定一個符號給它：

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



---

### ::after

- 與 before 相比，顧名思義就是在元素的後方 - 加入偽元素。

```
h1::after {
  content: "★";
  color: blue;
}
```

- [可參考更多的偽元素文件 / Mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 

---

###### tags: `2022 網頁開發全攻略教程 / CSS篇章`