CSS伪元素完全指南
面向编程小白的伪元素详细解析 – 通过可视化示例理解核心概念
➊ 什么是伪元素？
伪元素就像是给你的HTML元素添加的”虚拟装饰品”。它们不是实际存在于HTML中的元素，而是通过CSS创建的视觉元素。
想象一下：你有一张照片（HTML元素），伪元素就像是给这张照片加上的相框(::before)或签名(::after)，它们不属于原始照片，但能增强展示效果。
伪元素 vs 伪类
| 特性 | 伪元素 | 伪类 |
|---|---|---|
| 作用对象 | 创建虚拟元素 | 选择元素的特殊状态 |
| 语法 | ::before, ::first-line等 | :hover, :active, :nth-child()等 |
| 数量 | 每个元素最多两个(::before, ::after) | 可以应用多个伪类 |
| 内容生成 | 可以生成内容 | 不能生成内容 |
➋ 核心知识点
重要提示： 所有伪元素都需要设置
content属性（除了::first-letter, ::first-line等部分例外）
伪元素基本语法
selector::pseudo-element {
property: value;
}
property: value;
}
兼容性说明
现代浏览器都支持双冒号(::)语法。单冒号(:)是旧版写法，为保持兼容性，除了::before和::after外，其他伪元素可以使用单冒号。
➌ ::before 伪元素
在选定元素的内容之前插入生成的内容。
.element::before {
content: “”; /* 必须属性 */
display: block;
/* 其他样式 */
}
content: “”; /* 必须属性 */
display: block;
/* 其他样式 */
}
实际应用：
在标题前添加装饰图标：
标题前的装饰
（实际效果见右侧可视化示例）
使用场景： 装饰性图标、引号、标签、提示标记等不需要实际HTML元素的结构。
➍ ::after 伪元素
在选定元素的内容之后插入生成的内容。
.element::after {
content: “”; /* 必须属性 */
display: inline-block;
/* 其他样式 */
}
content: “”; /* 必须属性 */
display: inline-block;
/* 其他样式 */
}
➎ ::first-letter 伪元素
选择块级元素的第一行第一个字母（如果该字母前面没有图片或其他内容）。
p::first-letter {
font-size: 2em;
color: red;
float: left;
}
font-size: 2em;
color: red;
float: left;
}
实际效果：
这里展示首字母放大效果。伪元素可以让我们设置段落的首字母样式而不修改HTML结构。
注意： 仅适用于块级元素(display: block)。行内元素需要设置为block或inline-block。
➏ ::first-line 伪元素
选择块级元素的第一行文本。
p::first-line {
font-weight: bold;
color: blue;
}
font-weight: bold;
color: blue;
}
实际效果：
这里展示首行文本的特殊样式。无论窗口大小如何变化，只有第一行文本会应用特殊样式。这就是伪元素的魔力所在！
➐ ::selection 伪元素
设置用户选中文本时的样式。
::selection {
background-color: yellow;
color: black;
}
background-color: yellow;
color: black;
}
实际效果：
尝试选中这段文字，你会发现选中区域的背景色和文字颜色发生了变化。
➑ ::placeholder 伪元素
设置表单输入框的占位符文本的样式。
input::placeholder {
color: #999;
font-style: italic;
}
color: #999;
font-style: italic;
}
实际效果：
➒ ::marker 伪元素
设置列表项标记（如数字、圆点）的样式。
li::marker {
color: red;
font-weight: bold;
}
color: red;
font-weight: bold;
}
实际效果：
- 列表项一
- 列表项二
- 列表项三
➓ ::backdrop 伪元素
设置全屏元素（如对话框）后面整个视口的背景。
dialog::backdrop {
background: rgba(0, 0, 0, 0.8);
}
background: rgba(0, 0, 0, 0.8);
}
说明：
通常与<dialog>元素一起使用，用于创建模态框背景。
🎯 伪元素可视化演示
::before
元素内容前插入
::after
元素内容后插入
P::first-letter
首字母特殊样式
::first-line
首行文本样式
📝 伪元素使用要点总结
- 伪元素是虚拟元素 – 它们不存在于DOM中，但可以设置样式
- content属性是关键 – 对于::before和::after必须设置content属性
- 默认是行内元素 – 可以修改为block/inline-block
- 优先级与常规选择器相同 – 遵循CSS优先级规则
- 组合使用 – 可以与其他选择器组合（如.class::before）
- 创造而非替代 – 伪元素用于视觉效果，而非内容结构
最佳实践： 伪元素是增强视觉效果的强大工具，但不应过度使用。对于关键内容，始终使用实际HTML元素。