8.1 偽元素的種類
CSS中的偽元素可以對元素的特定部分進行樣式設計，比如第一個字母、第一行，或者在元素前後增加內容。它們提供了更多的樣式設計可能性，無需更改HTML結構。偽元素用雙冒號 (::)表示。
主要偽元素：
::before::after::first-letter::first-line
8.2 偽元素 ::before
偽元素 ::before 在元素的內容之前添加內容。通常用來添加裝飾元素、圖示或附加文本。
語法：
selector::before {
content: "" | "文本" | url() | counter | attr();
屬性: 值;
}
content 字段中指定要添加的html代碼。
CSS
/* 在每個列表元素前加入箭頭 */
li::before {
content: "→ ";
color: red;
}
HTML
<ul>
<li>列表的第一個元素</li>
<li>列表的第二個元素</li>
<li>列表的第三個元素</li>
</ul>
8.3 偽元素 ::after
偽元素 ::after 在元素的內容之後添加內容。通常用來添加裝飾元素、圖示或附加文本。
語法：
selector::after {
content: "" | "文本" | url() | counter | attr();
屬性: 值;
}
content 字段中指定要添加的html代碼。
CSS
/* 在每個列表元素後加入點 */
li::after {
content: " •";
color: blue;
}
HTML
<ul>
<li>列表的第一個元素</li>
<li>列表的第二個元素</li>
<li>列表的第三個元素</li>
</ul>
8.4 偽元素 ::first-letter
偽元素 ::first-letter 應用於元素的第一個字母。通常用來創建段落中的裝飾性首字母。
語法：
selector::first-letter {
content: "" | "文本" | url() | counter | attr();
屬性: 值;
}
例：
CSS
/* 放大並更改每個段落第一個字母的顏色 */
p::first-letter {
font-size: 2em;
color: green;
}
HTML
<p>這是段落文本示例。</p>
<p>另一個段落文本示例。</p>
8.5 偽元素 ::first-line
偽元素 ::first-line 應用於元素的第一行。通常用於為段落的第一行進行樣式設計。
語法：
selector::first-line {
content: "" | "文本" | url() | counter | attr();
屬性: 值;
}
例：
CSS
/* 更改每個段落的第一行顏色並加粗 */
p::first-line {
color: navy;
font-weight: bold;
}
HTML
<p>
這是一個段落中的文本示例，其中包含足夠的文本以分解為多行，展示如何使用偽元素 ::first-line。每個段落的第一行將以粗體和 navy 顏色突出顯示，以吸引讀者的注意。這種效果是通過我們上面定義的 CSS 規則達成的。
</p>
<p>
注意，樣式只應用於第一行，無論其長度如何。段落中的其餘文本保留其原始樣式。這可能有助於突出關鍵點或在文本中創建視覺節奏。
</p>
GO TO FULL VERSION