总结
| 内容 | 说明 |
|---|---|
| 伪元素定义 | 用于选择元素的特定部分或虚拟部分，添加样式或内容 |
| 常见伪元素 | ::before、::after、::first-line、::first-letter、::selection 等 |
| 主要用途 | 插入内容、美化样式、清除浮动、增强交互 |
| 注意事项 | 不是真实 DOM，不能通过 JS 操作；必须使用 [content](file://d:\Code\Gitee\video-project\node\routes\comment\validators.js#L3-L7) 属性 |
| 推荐场景 | 按钮装饰、段落美化、表单优化、文本选中样式等 |
一、什么是伪元素？
CSS 伪元素是用于选择元素的特定部分或虚拟部分的语法，用于向某些选择器添加特殊效果。
伪元素并不是真正的 DOM 元素，而是通过 CSS 在元素的特定位置插入虚拟内容或样式。
二、伪元素语法
伪元素使用双冒号 :: 表示法（部分旧写法使用单冒号 :，如 :before）：
selector::pseudo-element {
property: value;
}
三、常见的伪元素
| 伪元素 | 描述 | 示例 |
|---|---|---|
::before |
在元素内容前插入内容 | 添加图标、装饰性内容 |
::after |
在元素内容后插入内容 | 清除浮动、添加提示 |
::first-line |
选择元素的第一行文本 | 段落首行样式控制 |
::first-letter |
选择元素的第一个字符 | 首字下沉效果 |
::selection |
选择用户选中的文本部分 | 自定义文本选中样式 |
::placeholder |
输入框中的占位符文本 | 自定义输入框提示样式 |
::marker |
列表项的标记（如 <ul> 的点） |
自定义列表项符号样式 |
::file-selector-button |
<input type="file"> 的按钮部分 |
自定义上传按钮样式 |
四、常用伪元素详解
1. ::before 和 ::after
常用于插入装饰性内容或辅助布局。
.box::before {
content: "★";
color: gold;
}
⚠️ 必须设置 [content](file://d:\Code\Gitee\video-project\node\routes\comment\validators.js#L3-L7) 属性，否则伪元素不会显示。
2. ::first-line
p::first-line {
font-weight: bold;
color: red;
}
适用于段落、文章类文本样式优化。
3. ::first-letter
p::first-letter {
font-size: 2em;
float: left;
}
实现“首字下沉”效果，常用于杂志、书籍类页面。
4. ::selection
::selection {
background-color: yellow;
color: black;
}
自定义用户选中文本时的背景和文字颜色。
5. ::placeholder
input::placeholder {
color: #999;
font-style: italic;
}
美化输入框的占位符提示。
五、伪元素的实际应用场景
| 场景 | 伪元素 | 说明 |
|---|---|---|
| 添加装饰图标 | ::before / ::after |
如按钮前缀图标、装饰点 |
| 清除浮动 | ::after |
通过插入空元素并设置 clear: both |
| 美化段落 | ::first-line / ::first-letter |
提升文章可读性和美观性 |
| 自定义选中样式 | ::selection |
增强用户交互体验 |
| 表单美化 | ::placeholder / ::file-selector-button |
统一 UI 风格 |
六、注意事项
- 伪元素不能通过 JavaScript 获取或操作（不是真实 DOM 节点）。
::before和::after必须配合 [content](file://d:\Code\Gitee\video-project\node\routes\comment\validators.js#L3-L7) 属性使用。- 伪元素可以配合
attr()函数动态插入属性值：
a::after {
content: " (" attr(href) ")";
}
- 伪元素支持所有 CSS 属性，如
color、font-size、background等。