甚麼是偽元素 (pseudo-element)

甚麼是 CSS 的偽元素 ?看到「偽」這個字就可以猜想的出來，偽元素就表示這個元素是假的、不存在的、不真實的。他不像<a>,<p>,<br>…這些元素，只要打在 HTML 文件裡，就可以在瀏覽器看到他們，但是偽元素不同，就算你在HTML文件輸入<::after>或是<::before>… 瀏覽器也不會理你的，而是要在CSS內加入設定的。

因此簡單來說，當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，尤其在某個指定元素前後加上特別內容，包括加上圖案、文字、符號、背景圖等，搭配適當的CSS內容安排，即可達成美化的目的。

介紹五個偽元素代表的意義，並放上一張示意圖，假使在這邊的符合元素為 <p>。

::first-line：可以給<p>的第一行定義樣式 (瀏覽器會隨著放大或縮小來換行)

::first-letter：可以給<p>的第一個字母定義樣式 (以英文來看是第一個字母；中文就是第一個中文字)

::before：可以在<p>之前插入樣式/內容

::after：可以在<p>之後插入樣式/內容

::selection：定義當使用者反白<p>時的樣式

相關課程 : 精修DIV+CSS網頁排版設計輕鬆做