检测CSS content属性引发的文本变更相关问题

嘿，这个问题问到点子上了！我当初第一次遇到CSS content生成的文本没法被DOM监测、也选不中的时候，也懵了好一阵。咱们来把这事说透：

首先，用CSS content属性（通常配合::before/::after伪元素）创建的文本或元素，专业上叫做生成内容（Generated Content）。这玩意儿从本质上就和普通DOM文本不一样——它是浏览器在渲染阶段临时生成的，完全不属于DOM树的一部分，这就是核心原因。

这些内容不会被解析到DOM节点中，而是存放在浏览器的**渲染上下文（Rendering Context）**里，属于「渲染树（Render Tree）」的分支。渲染树是DOM树和CSSOM树结合后生成的，专门负责计算每个元素的视觉表现，生成内容就挂在这棵树上，但不会同步回DOM结构里。所以你在DevTools的Elements面板里找不到它，MutationObserver自然也监测不到——人家管的是DOM的变化，这东西不在DOM里啊！

分两种情况说：

• 读取CSS中定义的content值：这个完全可以！用window.getComputedStyle()就能拿到元素最终计算后的content属性值。举个例子：

  const targetEl = document.querySelector('.your-target-element');
  const computedContent = window.getComputedStyle(targetEl).content;
  // 注意：拿到的结果会带引号，比如CSS写content: "Hi"，这里会得到 "\"Hi\""
  // 可以用replace去掉引号：
  const cleanContent = computedContent.replace(/^"|"$/g, '');
  

• 直接访问渲染后的文本节点：抱歉，这做不到。因为生成内容不在DOM里，没有对应的文本节点可以通过textContent、innerText这类API获取。哪怕你能通过CSS让它看起来能被选中（比如设置user-select: text），选中的内容也没法通过DOM API拿到——本质上它还是渲染层的产物，不是DOM的一部分。

补充一句：为啥没法选中？因为浏览器的文本选中功能默认只针对DOM中的文本节点，生成内容不在这个范畴里，所以默认是不可选的。就算你开了user-select，也只是视觉上允许选中，底层还是没法通过DOM操作获取选中的内容。

内容的提问来源于stack exchange，提问作者Ofek Shilon