新手指南：掌握 CSS 偽元素(pseudo element)的用法
更新日期： 2024 年 9 月 14 日
在設計網頁時，我們經常需要為元素添加一些裝飾或輔助內容。
但有時候不方便或不想修改 HTML 結構，這時候，CSS 偽元素可以派上大用場。
這篇文章將介紹什麼是 CSS 偽元素（pseudo element），以及如何使用它們來讓你的網頁設計更靈活和高效。
什麼是 CSS 偽元素？
CSS 偽元素是用來選擇元素的一部分，或創建不在文檔結構中的元素的特性。
它們讓你可以添加裝飾性內容或樣式，而不需要在 HTML 中添加額外的元素。
常見的 CSS 偽元素包括 ::before 和 ::after，這兩個偽元素經常用於插入內容或裝飾元素。
偽元素的常見用法
添加裝飾性元素
例如使用 ::before 和 ::after 添加圖標、引號、橫線等裝飾。
清除浮動
在 Flexbox 和 Grid 出現之前，常用 ::after 搭配 clear: both; 來清除浮動。
輔助文本或符號
在按鈕或標題等元素之前或之後添加輔助性的符號或文字，增強用戶體驗。
常見的 CSS 偽元素
- ::before: 用於在選擇的元素內容之前插入內容。
- ::after: 用於在選擇的元素內容之後插入內容。
其他常見的偽元素
- ::first-letter: 選擇元素內容的第一個字母。
- ::first-line: 選擇元素內容的第一行。
- ::placeholder: 用於選擇 <input> 或 <textarea> 元素中的佔位符文本。
如何使用 ::before 和 ::after
::before 和 ::after 偽元素可以讓你在元素內容的前後，插入額外的裝飾或輔助內容。
要使用這些偽元素，你通常需要結合 content 屬性。
例子：使用 ::before 插入圖標
假設你想在一個按鈕的文字之前插入一個小圖標，可以這樣做：
<button class="button">Submit</button>.button {
display: inline-block;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
position: relative;
font-size: 16px;
cursor: pointer;
}
.button::before {
content: '✓';
margin-right: 10px;
font-size: 16px;
}解釋
- .button 是一個帶有背景色和內邊距的按鈕。
- ::before 偽元素在按鈕的文字之前插入了一個打勾符號 (✓)，並且通過 margin-right 調整了符號與文字之間的距離。
例子：使用 ::after 添加裝飾性內容
假設你想在某個段落後面加上一個裝飾性的橫線，可以這樣做：
<p class="paragraph">這是一段文字。</p>.paragraph {
font-size: 18px;
color: #333;
position: relative;
}
.paragraph::after {
content: '';
display: block;
width: 50px;
height: 2px;
background-color: #007BFF;
margin-top: 10px;
}解釋
- .paragraph 是一個段落，它的 ::after 偽元素在段落內容的末尾插入了一個藍色的橫線，這種效果常見於文章標題或重點內容的裝飾。
注意事項
- 必須使用 content 屬性：::before 和 ::after 偽元素必須設置 content 屬性，否則它們不會顯示內容。即使不插入文字，也需要設置為空字符串（content: ”;）。
- 相對定位：使用偽元素時，父元素通常需要設置 position: relative;，這樣你可以更方便地控制偽元素的定位。