伪元素::before/::after仅用于装饰性视觉内容，必须设置content属性才渲染，需父元素设position:relative才能精确定位，且不可被JS操作、无语义、不参与可访问性与SEO。
伪元素 ::before 和 ::after 不能替代真实 HTML 内容，只适合加图标、分隔线、引号这类纯装饰性视觉元素；漏写 content 就等于没写，写了也不显示。
为什么写了 ::before 却什么都没出现？
最常见原因是没设 content 属性——它不是可选的，是强制开关。哪怕只想画个圆点或占位，也得写 content: ""。
-
content: none或完全省略 → 伪元素彻底不渲染 -
content: "→"、content: attr(data-icon)、content: url(./arrow.svg)都合法，但路径错或属性不存在时会留白 - 老版 Safari 对
content: url()渲染不稳定，真机测试比 DevTools 更可靠
怎么让 ::after 图标精确停在按钮右边？
伪元素默认插在内容流里，要“浮”出来必须靠定位配合。关键不在伪元素本身，而在父容器是否设置了定位上下文。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 宿主元素（比如
button）必须有position: relative，否则position: absolute的伪元素会相对于body或最近定位祖先偏移，极易错位 - 用
transform: translateY(-50%)垂直居中比硬写top: 12px更健壮，避免字体缩放后偏移失准 - 记得给宿主留出足够
padding-right，否则文字可能被伪元素遮住
哪些事绝对不能用 ::before/::after 做？
它们是渲染层的“影子”，不是 DOM 节点，能力边界非常明确。
立即学习“前端免费学习笔记（深入）”；
- 无法被
document.querySelector("::before")获取，JS 完全不可操作 - 不触发任何事件（
click、hover、focus），也不能加tabindex - 屏幕阅读器忽略其
content，搜索引擎不索引，所以“必填”星号、错误提示、语言标签都不能只靠它 - 不会撑开父容器高度，想让它参与布局就得手动设
display: block+ 尺寸 +position: absolute偏移
最容易被忽略的一点：伪元素的层级受父元素定位状态制约——如果父元素没设 position，你给伪元素加再多 z-index 也没用。
