什麼是偽類?
根據W3school 裡面對偽類的定義寫的:
偽類是用於定義元素的特殊狀態
那偽類會通常會用在以下的情境:
- 當滑過目標元素(:hover)
- 目標元素獲得焦點的樣式(:focus)
直接來一個目標元素獲取焦點的範例
什麼是偽元素?
根據W3school 裡面對偽元素的定義寫的:
偽元素用于設置元素指定部分的樣式。
那偽元素通常會用在以下的情境:
- 設置元素的首字母(::first-letter)或 首行(::first-line)
- 設置元素內容的之前(::before)或之後(::after)
小小來個範例:
首先，p段落就是設置元素
那p:before 就是設置元素內容的之前
那p:after 就是設置元素內容的之後
偽元素 和 偽類寫法區別
其實，偽元素的寫法除了::，也可以寫成:，但是，這樣會跟偽類寫法有干擾。 所以，在撰寫偽元素的部份時，還是用::的寫法會比較好。
偽元素 和 偽類搭配範例
最後，先來一個範例，它在很多版型中很常出現，它是利用偽元素和偽類來達成的
接著，再來另一個我也還蠻喜歡的效果，就是標題漸層的感覺
這個範例要特別注意的是，偽元素::before和::after 要為它們加上height的實際高度喔，不然，偽元素的overflow:hidden會沒有效果喔。