CSS 伪元素
在 CSS 中，伪元素（Pseudo-elements） 是用来选中元素的一部分或虚拟区域，比如：元素的第一个字、第一行、内容前后插入内容等。它们不是真正存在于 DOM 结构中的“真实元素”，但可以像普通元素一样被选中和样式化。
✅ 一、什么是伪元素？
伪元素以 双冒号 :: 开头（也可用单冒号 : 兼容旧写法），代表“虚拟的部分内容”。
p::first-line {
font-weight: bold;
}
🔸 上面这段表示：让 <p> 的第一行加粗。
✅ 二、常见伪元素汇总
| 伪元素 | 作用说明 | 示例 |
|---|---|---|
::before | 在元素内容前插入内容（虚拟） | a::before |
::after | 在元素内容后插入内容（虚拟） | div::after |
::first-letter | 选中第一个字母（仅块元素） | p::first-letter |
::first-line | 选中第一行（随容器宽度变化） | p::first-line |
::selection | 用户选中（高亮）文本时的样式 | p::selection |
::marker | 列表项前的标记符号（前缀圆点/数字） | li::marker |
::placeholder | 输入框中的占位符文本 | input::placeholder |
::file-selector-button | 文件上传按钮样式 | input::file-selector-button |
✅ 三、重点伪元素讲解
🔹 ::before 和 ::after （最常用）
用于在元素前/后插入内容（不在 DOM 中）。
a::before {
content: "🔗 ";
}
a::after {
content: "（点击跳转）";
color: gray;
}
📌 必须配合 content 属性使用！
🔔 常见用途：
- 给按钮添加图标
- 模拟气泡框箭头
- 创建伪清除（clearfix）
🔹 清除浮动技巧（clearfix）
.clearfix::after {
content: "";
display: block;
clear: both;
}
📎 利用 ::after 插入一个清除浮动的“虚拟块级元素”。
🔹 ::first-letter 和 ::first-line
p::first-letter {
font-size: 200%;
color: red;
}
p::first-line {
font-weight: bold;
}
💡 应用于段落类元素中，做古典排版或强调首字。
🔹 ::selection（高亮选中文本）
::selection {
background: yellow;
color: black;
}
📌 应用于用户鼠标选中的文本，提升可读性。
🔹 ::placeholder（输入框提示文本）
input::placeholder {
color: gray;
font-style: italic;
}
📌 仅作用于 input / textarea 中的 placeholder 内容。
🔹 ::marker（列表前缀）
li::marker {
color: red;
font-size: 20px;
}
📌 作用于 ul / ol 中的圆点或编号。CSS 3 新增，现代浏览器支持良好。
✅ 四、使用注意事项
| 项目 | 建议做法 | 说明 |
|---|---|---|
| 写法 | 推荐用双冒号 :: | 单冒号 : 仍支持，但不推荐 |
必须设置 content | ::before, ::after | 否则无法显示 |
| 不可选中 DOM | 不存在于 HTML 结构中 | DevTools 中只能在样式中看到 |
| 与伪类组合 | 可以！ | a:hover::after 是合法写法 |
✅ 五、伪元素与伪类的区别
| 项目 | 伪类（:hover） | 伪元素（::before） |
|---|---|---|
| 表示什么 | 元素的“状态” | 元素的“虚拟部分” |
| 写法 | 单冒号 : | 双冒号 ::（推荐） |
| DOM 中存在？ | 存在状态但非节点 | 不存在，是虚构内容 |
| 典型用途 | 鼠标悬停、聚焦、选中等 | 插入图标、修饰首字、插入箭头等 |
✅ 六、示例：按钮图标 + 悬停动画
<button class="download-btn">下载</button>
<style>
.download-btn::before {
content: "⬇️ ";
}
.download-btn:hover::before {
color: green;
}
</style>
效果：按钮文字前插入下载图标，鼠标悬停时图标变绿。
✅ 七、浏览器兼容性简表
| 伪元素 | 支持情况 |
|---|---|
::before, ::after | ✅ 全部支持 |
::first-letter, ::first-line | ✅ 全部支持 |
::selection | ✅ 主流浏览器支持 |
::placeholder | ✅ 支持，旧版需前缀 |
::marker, ::file-selector-button | ✅ 现代浏览器支持 |
如你有特定需求（比如在输入框后插入图标、列表前加自定义符号、选中文字美化），欢迎告诉我，我可以帮你写完整的 CSS 示例。