33

假设我已经标记：

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

..与CSS：

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

这将产生文本：Hello world！-小提琴

div:after {
    content: attr(data-generated);
}
<div data-generated="world!">Hello </div>

但...

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

在此处输入图像描述

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

注意：

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

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

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

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

4

3 回答 3

17

不，你不能。

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

用CSS2.1 规范的话来说，

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

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

于 2014-10-27T07:10:27.277 回答
8

您可以使用一些 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>

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

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

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

于 2014-10-30T10:24:02.087 回答
4

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

检查这些链接：

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

于 2014-06-24T11:57:09.473 回答