上查看所有课程
CSS 伪元素选择器选择 HTML 元素的特定部分。例如，
h1::first-letter {
color: red;
}浏览器输出
这里，first-letter 伪元素选择 h1 元素的第一个字母并将其颜色更改为 red。
伪元素选择器的语法
伪元素选择器的语法如下
element::pseudo-element {
/* CSS styles */
}这里，
element: 指定 HTML 元素pseudo-element: 指定我们要定位的元素的特定部分
伪元素关键字添加到选择器中，并以双冒号 (::) 开头。
伪元素的类型
CSS 中有以下不同类型的伪元素。
::first-line: 选择块级元素内的第一行文本::first-letter: 选择文本的第一个字母::before: 在元素的实际内容之前插入内容::after: 在元素的实际内容之后插入内容::marker: 选择列表元素的标记::selection: 样式化用户选择的 HTML 元素部分
让我们详细了解它们中的每一个。
CSS first-line 伪元素
first-line 伪元素选择并样式化 HTML 元素内的文本第一行。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo-Elements</title>
</head>
<body>
<p>
We can use ::first-line pseudo-element to select and style
the first line of the text within the HTML element. Here, the color
of the first line is different from others.
</p>
<p>
Let's add one more paragraph to visualize the changes in text color
and understand the pseudo-element more clearly. Here, also only the first
line will change its color to red.
</p>
</body>
</html>p::first-line {
color: red;
}浏览器输出
这里，first-line 伪元素选择所有 p 元素的第一行并将其颜色更改为 red。
CSS first-letter 伪元素
first-letter 伪元素选择并样式化 HTML 元素内的文本第一个字母。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo Elements</title>
</head>
<body>
<p>
We use ::first-letter pseudo-element to style the first
letter of the text.
</p>
</body>
</html>p::first-letter {
color: orange;
font-size: 32px;
font-weight: bold;
}浏览器输出
这里，first-letter 伪元素选择并样式化 p 元素的第一个字母。
CSS before 伪元素
before 伪元素用于在 HTML 元素的实际内容之前插入某些内容。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo Elements</title>
</head>
<body>
<h1> Pseudo Elements</h1>
</body>
</html>h1::before {
content: "Let's learn ";
color: red;
}浏览器输出
这里，before 伪元素在 h1 元素的原始内容之前插入新内容。
注意: before 伪元素也可以用于在 HTML 元素之前插入图像。
CSS after 伪元素
after 伪元素用于在 HTML 元素的实际内容之后插入某些内容。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo Elements</title>
</head>
<body>
<h1>Let's learn</h1>
</body>
</html>h1::after {
content: " Pseudo Elements";
color: orange;
}浏览器输出
这里，after 伪元素在 h1 元素的原始内容之后插入新内容。
CSS marker 伪元素
marker 伪元素选择并样式化列表项的标记。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo Elements</title>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>li::marker {
color: red;
}浏览器输出
这里，marker 伪元素选择所有列表项的标记并将其颜色更改为 red。
CSS selection 伪元素
selection 伪元素样式化用户选择的 HTML 元素部分。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Pseudo Elements</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>
</html>p::selection {
background-color: greenyellow;
}浏览器输出
这里，selection 伪元素样式化用户选择的 p 元素部分并将其颜色更改为 greenyellow。