是否可以选择 css 生成的内容？ [复制]

Question

假设我已经标记：

<div data-generated="world!">Hello </div>

.. 使用 CSS：

div:after {
    content: attr(data-generated);
}

这会产生文本：Hello world！ - FIDDLE

div:after {
    content: attr(data-generated);
}

<div data-generated="world!">Hello </div>

但是...

如果我尝试选择/复制文本 - 只有“你好”部分是可选的。

有没有办法选择css生成的文本？

注意：

1) 我查看了有关生成内容的规范（here 和here），但我没有看到任何关于此问题的参考。

规范here 和here 似乎说生成的内容应该是可选择的

生成的内容应该是可搜索的、可选择的，并且可供 辅助技术

2) 如果这个问题的答案是“不 - 这是不可能的” - 请链接到说明这一点的可靠来源。

Answer 1

您可以使用一些 javascript 来模拟，而不是实际选择生成的内容。

我偶然发现了这个David Walsh blog， 他提供了获取生成内容的代码。

使用它，您可以将生成的内容附加到常规内容以模拟选择生成的内容，然后您可以将生成的内容设置为display:none，使其不会出现两次。像这样：

FIDDLE

String.prototype.unquoted = function() {
  return this.replace(/(^['"])|(['"]$)/g, '')
}

var element = document.getElementById('div1');

var content = window.getComputedStyle(
  element, ':after'
).getPropertyValue('content');

element.innerHTML = element.innerHTML + content.unquoted();

console.log(content.unquoted());

div:after {
  content: attr(data-generated);
  display: none;
}

<div id="div1" data-generated=" world!">Hello</div>

那么你为什么想做这样的事情呢？

好吧，你可能永远不想这样做，但我在这个问题上留下了很长的评论，解释了我曾经遇到的一个特定限制，这可能是一个解决方案。

注意：我确实意识到这个“解决方案”并没有真正选择生成的内容本身，而是决定发布这个答案，以防有人需要解决方法。

Answer 2

不，你不能。

见Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery。重复这里的描述，生成的内容不是 DOM 的一部分。

用CSS2.1 spec的话来说，

生成的内容不会改变文档树。

生成的内容只存在于渲染引擎的视觉世界中。选择是关于选择 DOM 的一部分。生成的内容不在 DOM 中，因此无法选择。出于同样的原因，无法选择生成的计数器或列表项项目符号。

Answer 3

不要在data 属性中存储应该可见和可访问的内容，因为辅助技术可能无法访问它们

检查这些链接：

http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes