28. CSS 的伪元素是什么？有什么用-CSDN博客

内容	说明
伪元素定义	用于选择元素的特定部分或虚拟部分，添加样式或内容
常见伪元素	`::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;
}

常用于插入装饰性内容或辅助布局。

.box::before {
  content: "★";
  color: gold;
}

⚠️ 必须设置 [content](file://d:\Code\Gitee\video-project\node\routes\comment\validators.js#L3-L7) 属性，否则伪元素不会显示。

p::first-line {
  font-weight: bold;
  color: red;
}

适用于段落、文章类文本样式优化。

p::first-letter {
  font-size: 2em;
  float: left;
}

实现“首字下沉”效果，常用于杂志、书籍类页面。

::selection {
  background-color: yellow;
  color: black;
}

自定义用户选中文本时的背景和文字颜色。

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) ")";
}

28. CSS 的伪元素是什么？有什么用