伪元素::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 图标精确停在按钮右边？

伪元素默认插在内容流里，要“浮”出来必须靠定位配合。关键不在伪元素本身，而在父容器是否设置了定位上下文。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 宿主元素（比如 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 也没用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！