伪元素不改变HTML结构，仅渲染层生成匿名节点，无DOM存在、不可选中、不可交互、不参与SEO；必须设content才渲染，且仅支持纯文本或URL；定位依赖父元素定位上下文，最多各一个::before和::after。
伪元素不改变 HTML 文档结构，它只在渲染层生成匿名节点，浏览器不会把它塞进 DOM 树里 —— 所以 document.querySelector('div::before') 永远返回 null，innerHTML 也读不到它插入的内容。
伪元素必须写 content 才能渲染
这是最常卡住人的地方。没设 content，哪怕写了 display: block、background: red，伪元素也完全不占空间、不可见、不参与布局。
-
content: ""是最安全的兜底写法，生成空内容但可样式化 -
content: attr(data-tip)能读取元素属性值，但仅限纯文本；data-tip="<strong>危险</strong>不会解析 HTML -
content: url(./icon.svg)支持内联小图标，但路径错误或 SVG 加载失败时会留白，建议加background降级 -
content: none或直接省略content→ 伪元素彻底不创建渲染节点
::before 和 ::after 的定位依赖父容器的定位上下文
它们默认是 inline 级别，插入在元素内容流内部的最前/最后。想让它当遮罩、角标、三角形，就得手动脱离文档流。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父元素没设
position: relative（或absolute/fixed）？那position: absolute的伪元素会相对于body或最近的定位祖先偏移，经常“飞走” -
z-index在伪元素上生效的前提：父元素本身是定位元素（position不是static） - 伪元素默认不撑开父容器高度；若需“撑高”，得配合
display: block+ 显式宽高 +position: absolute+top/bottom偏移
伪元素无法被屏幕阅读器识别，也不参与 SEO
它生成的内容对辅助技术不可见，搜索引擎也不索引 —— 所以关键信息、操作提示、语言标签绝不能靠 content 插入。
立即学习“前端免费学习笔记（深入）”；
- 表单必填星号 ✅ 可用
::after，但“请输入手机号”这类错误提示必须写在 DOM 中 - 多语言切换按钮上的 “EN” / “中文” ❌ 不能靠
content: "EN"，得用真实文本节点 - 模拟 checkbox 的勾选图标 ✅ 可以，但真实的
<input type="checkbox">必须存在且绑定正确 - 伪元素无法响应
click、hover等事件；要交互，只能把事件绑在父元素上
真正容易被忽略的是：一个元素最多只能同时使用一个 ::before 和一个 ::after；想叠加三层装饰？得靠额外 wrapper 元素或 SVG，不是靠堆伪元素。
