伪元素内容不可被搜索引擎和屏幕阅读器访问，因其不属于DOM树而仅存在于渲染层；content: attr()插入的文本同样不可访问，必须使用真实DOM元素实现语义化。
伪元素内容不在 DOM 树中，搜索引擎和屏幕阅读器根本“看不见”
这不是兼容性问题，也不是 bug，而是 CSS 规范明确的设计：::after 生成的内容属于“渲染层”，不进入文档树。搜索引擎爬虫只解析 HTML 结构，屏幕阅读器只遍历可访问的 DOM 节点——而伪元素连 document.querySelector() 都查不到，自然无法被抓取或朗读。
content: attr() 动态插入的文本同样不可访问
哪怕你用 content: attr(data-label) 把真实属性值“搬”进 ::after，浏览器也只是把它当装饰渲染，不会把该字符串注入语义流。即使 HTML 中写了 <div data-label="重要说明"></div>，::after 里显示的“重要说明”依然：
• 不出现在 getComputedTextContent() 结果中
• 不被 aria-label 或 role="text" 影响
• 不触发任何无障碍 API（如 MSAA、AXAPI）暴露
哪些场景下你误以为“应该能读”但实际不行
- 用
::after插入图标旁的辅助文字（如“已验证”徽章）→ 屏幕阅读器跳过，视障用户完全不知情 - 在链接末尾加
content: " (外部链接)"→ 搜索引擎索引时只看到原始链接文本，括号内容不参与排名 - 通过
content: open-quote自动加引号 → 引号不计入语义长度，也不影响语音合成停顿
真需要语义化或可抓取，必须用真实 DOM 元素
别试图用 CSS “绕过”语义限制。可行做法只有：
• 把 content: "✓" 改成 HTML 里的 <span>✓</span>
• 用 JS 动态创建 <span class="badge">New</span> 并 append 到目标节点
• 若为减少冗余，保留 data-* 属性，但由 JS 渲染真实节点，而非依赖 CSS attr()
伪元素的不可访问性不是缺陷，是边界——它提醒你：要进搜索引擎或读屏软件的内容，从来就不该靠 content 去“画”。
立即学习“前端免费学习笔记（深入）”；
