伪元素内容不会被屏幕阅读器读取，所谓“重复读取”是误判；实际是真实DOM元素的aria-label、title等与可见文本重复导致，伪元素根本不进入可访问性树。
伪元素内容根本不会被屏幕阅读器读取，所谓“重复读取”是误判
伪元素（::before、::after）生成的内容不进入 DOM 树，也不出现在可访问性树（AX Tree）中，屏幕阅读器完全无视它。如果你观察到某段文本被读了两遍，问题一定出在真实 DOM 元素上，而不是伪元素本身在“多读一次”。常见诱因是：宿主元素已含可见文本，又用 aria-label 或 aria-labelledby 重复声明了相同语义；或开发者误将伪元素当内容容器，同时又在 HTML 中写了等效文字。
为什么你会觉得“::after 被读了两次”
实际发生的是：屏幕阅读器读了真实文本节点 + 宿主元素的 aria-label（或 title），而你误以为其中一次来自伪元素。伪元素没有 nodeType、没有 textContent、不能被 getSelection() 捕获，更不会触发任何可访问性事件。验证方法很简单：document.querySelector('.item::after') 直接抛 SyntaxError，window.getComputedStyle(el, '::after').content 返回字符串值，但该值对读屏软件零影响。
真正导致重复播报的典型配置
以下组合极易引发重复，且和伪元素无关：
-
<button aria-label="提交">提交</button>→ 屏幕阅读器先读aria-label，再读按钮内文本“提交” -
<span title="关闭" role="button">×</span>→title和role="button"的默认朗读行为叠加 - 用
attr(data-label)驱动content: attr(data-label)，同时又给宿主加aria-label，两者值一致 - 父容器设了
aria-live="polite"，而子元素文本变更后，真实 DOM 更新 + 伪元素视觉更新被误认为两次触发
怎么确认是不是伪元素惹的祸
打开浏览器的 Accessibility Inspector（Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”），检查目标区域的 AX Tree 中是否包含该伪元素——它永远不会出现。如果 AX Tree 里有两个相同语义的节点，一定是两个真实元素或一个元素配了双重语义属性。此时应：
立即学习“前端免费学习笔记（深入）”；
- 删掉冗余的
aria-label，优先用真实文本 - 若需视觉缩写（如“5m”），用
visually-hidden类包裹完整文本，而非依赖content: attr() - 避免在已有文本的元素上叠加
title，尤其当title值与文本一致时 - 测试时关闭所有 CSS（DevTools → Rendering → “Disable all styles”），看读屏行为是否变化；若不变，说明问题纯属 DOM/ARIA 层
