是否可以选择css生成的内容？

Question

我们说我有标记：

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

..使用CSS：

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

BUT ...

如果我尝试选择/复制文本 - 只有＆＃39;你好＆＃39;部分是可选择的。

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

NB：

1）我查看了有关生成内容的规范（here和here），但我还没有看到任何对此问题的引用。

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

  

生成的内容应该是可搜索的，可选择的和可用的   辅助技术

2）如果这个问题的答案是“否” - 那是不可能的＆＃39; - 请链接到可信的来源，说明这一点。

Answer 1

不，你不能。

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

用CSS2.1 spec，

的话说

  

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

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

Answer 2

不要存储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

Answer 3

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

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

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

<强> FIDDLE

＆＃13;

＆＃13;

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());

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

那你为什么要做那样的事呢？

嗯，你可能永远不想这样做，但我对解释我曾经拥有的一个特定约束的问题留了很长时间的评论，这可能是一个解决方案。

NB：我确实意识到这个＆＃39;解决方案＆＃39;并没有真正选择生成的内容本身，但决定发布这个答案，以防有人在那里需要解决方法。