是否可以选择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>

但...

如果我尝试选择/复制文本 - 只能选择'hello'部分.

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

注意:

1)我已查看有关生成内容的规范(此处和此处),我没有看到任何对此问题的引用.

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

生成的内容应该是可搜索的,可选择的,并且可用于辅助技术

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

Answer 1

不,你不能.

请参阅使用jQuery选择和操作CSS伪元素,例如:: before和:: after.要重复那里描述的内容,生成的内容不是DOM的一部分.

用CSS2.1规范的话来说,

生成的内容不会更改文档树.

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

Answer 2

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

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

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

小提琴

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 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/使用数据属性