伪元素选择器详细说明以及案例
2025-03-11
5
伪元素选择器用于选择元素中的特定部分，而不是元素本身。它们以双冒号 (::) 开头，常用于添加样式到元素的某些部分。
常用伪元素选择器
::before
在元素内容之前插入内容。p::before { content: "前缀: "; color: red; }在
<p>元素内容前添加红色文本“前缀: ”。::after
在元素内容之后插入内容。p::after { content: " 后缀"; color: blue; }在
<p>元素内容后添加蓝色文本“后缀”。::first-letter
选择元素内容的第一个字母。p::first-letter { font-size: 2em; color: green; }将
<p>元素的第一个字母放大并设置为绿色。::first-line
选择元素内容的第一行。p::first-line { font-weight: bold; }将
<p>元素的第一行文本加粗。::selection
选择用户选中的文本部分。::selection { background: yellow; color: black; }用户选中的文本背景变黄，文字变黑。
案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器案例</title>
<style>
p::before {
content: "前置内容: ";
color: red;
}
p::after {
content: " 后置内容";
color: blue;
}
p::first-letter {
font-size: 2em;
color: green;
}
p::first-line {
font-weight: bold;
}
::selection {
background: yellow;
color: black;
}
</style>
</head>
<body>
<p>这是一个段落，用于演示伪元素选择器的使用。</p>
</body>
</html>效果
在段落前添加红色文本“前置内容: ”。
在段落后添加蓝色文本“后置内容”。
段落的第一个字母放大并变为绿色。
段落的第一行文本加粗。
用户选中的文本背景变黄，文字变黑。
伪元素选择器通过这些方式增强了对元素内容的样式控制。
本篇文章内容来源于：伪元素选择器详细说明以及案例
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
