---
tags: CSS, 六角筆記王
title: CSS - 偽元素
---

# CSS - 偽元素
常用的偽元素主要有 :
- `::before`
- `::after`

它們與一般 CSS 相同，可以任意設定不同的屬性，但實際上不存在於網頁節點上，通常用來裝飾居多。

## ▶ 設置偽元素
- 偽元素會繼承父元素設定
- 若沒有 `content` 這個屬性，就不會顯示在畫面上
- 可以用來裝飾

### ✏ 偽元素 - content
它除了可以放一般文字，也可以放 :
- 屬性
- 內碼
### ✏ 範例
<iframe height="300" style="width: 100%;" scrolling="no" title="六角筆記王 - CSS - 偽元素" src="https://codepen.io/hsuan333/embed/JjNpXwX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/JjNpXwX">
六角筆記王 - CSS - 偽元素</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 參考來源
> 1. [oxxostudio - CSS 偽元素 ( before 與 after )](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html)