---
tags: CSS,
disqus: hackmd
---

# CSS的偽元素(Pseudo Elements)

參考文章
[CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)

---

`::after`、`::before`、`::first-letter`、`::first-line`、`::selection`

這5個是所有的偽元素。

常使用到的就是after跟before這兩個。

使用偽元素的方法網路上有很多，在這不多介紹。
推薦可以看這篇[CSS | 全都是假的！關於那些偽類和偽元素 - 基本用法](https://medium.com/enjoy-life-enjoy-coding/css-%E5%85%A8%E9%83%BD%E6%98%AF%E5%81%87%E7%9A%84-%E9%97%9C%E6%96%BC%E9%82%A3%E4%BA%9B%E5%81%BD%E9%A1%9E%E5%92%8C%E5%81%BD%E5%85%83%E7%B4%A0-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-4de48feb8607)

### 重點

主要是想記錄這個，以前在寫偽元素的時候都會加上個`display: block`，會有這樣的動作是因為有時候會遇到偽元素寫了樣式卻沒出現但加了塊級(例：block、flex、inline-block)上去後就可以的關係，一直以來都這樣寫也沒去追為什麼有時候要加才會有這個問題。

今天在工作上剛好被挑出來要我移除`display: block`，於是我就好奇，到底是怎麼一回事，又到底什麼時候要加什麼時候可以不加。

上網找，有人說偽元素預設是inline(行內)樣式。
再看了[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after)，在開頭就提到他是行內樣式。

終於解開我的迷惑了。