伪元素内容不在DOM中，无法被DOM API操作、选中、复制、SEO索引或屏幕阅读器识别，仅适用于纯装饰性视觉效果。
伪元素内容根本不在 DOM 树里
浏览器解析时，::before 和 ::after 只是渲染指令，不创建真实节点。这意味着：document.querySelector('::after') 会报错，getSelection() 拿不到它的文本，DOM API 完全无法触达。它就像画在屏幕上的像素，不是“文档的一部分”。
复制行为只作用于可选中的 DOM 文本节点
用户拖选、Ctrl+A 或 Shift+→ 都依赖浏览器对真实文本节点的识别和范围计算。伪元素的 content 不参与这个流程——即使视觉上紧贴文字，选区也自动跳过它。复制粘贴时，剪贴板里不会出现 content: "→" 这类符号，也不会带入 content: attr(data-tip) 的值。
user-select: none 对伪元素无效
user-select 是作用于宿主元素的 CSS 属性，伪元素本身不响应该规则。想让伪元素“看起来不可选”，只能靠设置其父元素为 user-select: none，但这只是连带抑制了宿主元素内所有真实文本的可选性，不是针对伪元素本身生效。
搜索引擎和屏幕阅读器同样看不见它
爬虫只解析 HTML 结构，屏幕阅读器只遍历可访问的 DOM 节点。伪元素内容既不进 HTML，也不进无障碍树，所以它对 SEO 和可访问性完全零贡献。哪怕你用 content: attr(data-label) 把有意义的字符串“搬”进来，浏览器也只当装饰渲染，不注入语义流。
立即学习“前端免费学习笔记（深入）”；
真正需要用户可选、可复制、可读的内容，必须用真实 HTML 元素承载。伪元素只适合纯装饰、非关键信息或视觉辅助——一旦把它当“内容容器”用，就踩进了规范边界之外。
