CSS - 擬似元素

你好啊，未來的 CSS 巫師們！今天，我們將踏上一段令人興奮的旅程，進入 CSS 擬似元素的神奇世界。作為你們友好的鄰居計算機老師，我非常高興能夠帶領你們進行這次冒險。所以，拿起你的虛擬魔杖（鍵盤），我們一起來探索吧！

概覽

想像你正在裝飾一個房間。你已經擺好了家具（HTML 元素），但你想添加一些額外的風格，而不需要改變家具本身。這就是擬似元素的作用！它們就像是可以添加到你 HTML 元素上的神奇裝飾，而不真正修改 HTML。

語法

在我們開始施法（寫代碼）之前，讓我們學習一下咒語（語法）：

選擇器::擬似元素 {
屬性: 值;
}

注意到雙冒號（::）了嗎？那就是我們的魔杖！它告訴瀏覽器，“嘿，我即將創造一些特別的東西！”

CSS ::after 擬似元素

我們先從 ::after 擬似元素開始。它就像是一個跟隨你元素四周的神奇助手，攜帶著額外的內容。

.magic-box::after {
content: "?";
margin-left: 5px;
}

在這個例子中，每個帶有類別 "magic-box" 的元素後面都會出現一頂禿頂帽表情符號。彷彿我們從 CSS 的帽子中變出了一隻兔子（或者是這個例子中的帽子）！

CSS ::before 擬似元素

如果 ::after 是跟隨你元素的助手，那麼 ::before 就是帶路的。它在你的元素之前添加內容。

.wizards-name::before {
content: "?‍♂️ ";
}

現在，每個巫師的名字前都會有一個巫師表情符號。阿布拉卡達布拉！

CSS ::first-letter 擬似元素

想要讓你的文字看起來像古老的魔法卷軸嗎？::first-letter 就是你的咒語！

p::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}

這會讓每個段落的第一个字母變得更大，顏色為紫色，並且向左浮動。就像有一個神奇的書記在你的手稿上照亮文字！

CSS ::first-line 擬似元素

與 ::first-letter 相似，但對於整個第一行文字有效。

p::first-line {
font-weight: bold;
color: #4B0082;
}

現在，每個段落的第一个行會變得加粗，顏色為青金石。就像在你神奇的卷軸上標記出最重要的部分！

CSS ::selection 擬似元素

從來沒想過要定制選中文字的樣式嗎？::selection 就是你的咒語！

::selection {
background-color: #FFD700;
color: #000000;
}

現在，當你在頁面上選擇文字時，它將具有金色背景和黑色文字。就像把你的游標變成了國王梅迪斯！

多個擬似元素

你可以在單個元素上使用多個擬似元素。這就像層層疊加咒語，以達到額外的魔法效果！

.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}

這會在帶有類別 "magical-quote" 的元素之前和之後添加引號，讓它們看起來像神秘的預言！

擬似元素方法表

這裡是我們學過的所有擬似元素方法的便捷魔法書（表格）：

擬似元素	描述	示例
::after	在元素後添加內容	.element::after { content: "?"; }
::before	在元素前添加內容	.element::before { content: "?‍♂️"; }
::first-letter	為文字的第一个字母設樣	p::first-letter { font-size: 2em; }
::first-line	為文字的第一行設樣	p::first-line { font-weight: bold; }
::selection	為選中的文字設樣	::selection { background-color: gold; }

記住，年輕的巫師們，擬似元素的威力在於它們能夠在不會擾亂你的 HTML 情況下添加樣式和內容。它們就像無形的助手，當你需要時總是隨叫隨到，但從不會礙事。

在我結束我們神奇的 CSS 之旅時，我希望你能夠受到啟發，去嘗試這些擬似元素。不要害怕混合和匹配，疊加和組合。唯一的限制是你的想象力！

在我多年的教學經歷中，我見過學生用這些簡單的工具創造出令人驚奇的作品。有一個學生甚至使用擬似元素創建了一個虛擬水族館，魚（::before 和 ::after 元素）在屏幕上遊來遊去！

所以，勇往直前，揮動你的 CSS 魔杖，創造你自己的魔法吧。並且記住，在網頁開發的世界裡，你從不會因為相信一點點魔法而變得太老。快樂編程，願你的樣式表永遠無 bug！

Credits: Image by storyset