偽元素介紹
偽元素（Pseudo-elements）是一種特殊的 CSS 選擇器，用於選擇和樣式化文檔中特定部分的內容。與偽類不同，偽元素可以創建和樣式化文檔中並不存在的元素。
常見偽元素
::before
::before 偽元素在選擇器的內容之前插入內容。通常與 content 屬性配合使用。
p::before {
content: "Before: ";
color: blue;
}
::after
::after 偽元素在選擇器的內容之後插入內容。同樣需要配合 content 屬性使用。p::after {
content: " After";
color: red;
}
::first-line
::first-line 偽元素樣式化選擇器的第一行文字。
p::first-line {
font-weight: bold;
color: green;
}
::first-letter
::first-letter 偽元素樣式化選擇器的第一個字母。
p::first-letter {
font-size: 2em;
color: orange;
}
::selection
::selection 偽元素樣式化用戶選取的文本部分。
::selection {
background: yellow;
color: black;
}
偽元素實踐
我們將通過一些示例來實踐偽元素的基本用法。
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>偽元素示例</title>
<style>
.example::before {
content: "★ ";
color: blue;
}
.example::after {
content: " ★";
color: red;
}
.example::first-line {
font-weight: bold;
color: green;
}
.example::first-letter {
font-size: 2em;
color: orange;
}
::selection {
background: yellow;
color: black;
}
</style>
</head>
<body>
<p class="example">這是一個示例段落，用於展示偽元素的基本用法。</p>
</body>
</html>
在這個例子中，.example 段落應用了一些偽元素樣式：
- 使用
::before和::after在段落內容前後插入星號。 - 使用
::first-line樣式化段落的第一行文字。 - 使用
::first-letter樣式化段落的第一個字母。 - 使用
::selection樣式化用戶選取的文本部分。
高級偽元素用法
除了基本用法，偽元素還可以用於一些高級的排版和樣式設計。例如，創建自定義引號、實現複雜的圖形效果等。
自定義引號
blockquote::before {
content: open-quote;
font-size: 2em;
color: gray;
vertical-align: -0.4em;
}
blockquote::after {
content: close-quote;
font-size: 2em;
color: gray;
vertical-align: -0.4em;
}
複雜圖形效果
.button {
position: relative;
padding: 10px 20px;
border: 2px solid #3498db;
color: #3498db;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
font-weight: bold;
transition: all 0.3s ease;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3498db;
z-index: -1;
transition: all 0.3s ease;
transform: scaleX(0);
transform-origin: right;
}
.button:hover::before {
transform: scaleX(1);
transform-origin: left;
}
.button:hover {
color: #fff;
}
