跳到主要內容

偽元素大集合!

在 css 中,常常會看到元素後方加入「::」雙冒號的東西,這種東西實際在 HTML 是看不到,對 css 來說,他們是「偽元素」,也就是透過 CSS 創造出來、附屬在 HTML 元素的元素。以前還沒接觸到偽元素時,總覺得要在現有的 HTML 裡加入某個條線、某個區塊很難,了解偽元素後,才發現它除了可以在 HTML 元素的後 after、前 before 加入外,還有其他各種不同條件的偽元素,真是好用到爆炸呀!

但是一個網站用太多的 HTML ,在前台檢查時也很麻煩,因為部份的偽元素是不容易檢查到,必須要透過經驗判斷,並直接查看 CSS 編碼才會發現。

下面就列出一些比較常使用的偽元素:

::after --> 元素的後方

::before --> 元素的前方

::first-letter --> 文字元素的第一個文字(字母)

::first-line --> 文字元素的第一行

::selection --> 文字反選後的效果,僅限文字顏色、背景、陰影這幾種效果