在 ::before 或 ::after 伪元素中选择文本答案

【问题标题】：Select text in ::before or ::after pseudo-element在 ::before 或 ::after 伪元素中选择文本
【发布时间】：2015-02-08 03:06:11
【问题描述】：

看看这个非常简单的代码

<!DOCTYPE html>
<html>
<head>
<style>
p::before {
    content: "Before - ";
}
</style>
</head>
<body>
<p>Hello</p>
<p>Bye</p>   
</body>
</html>

Css 在每个<P> 的开头添加¨Before -" 并呈现如下

如果您使用鼠标选择文本（用于复制粘贴），您可以选择原始文本，但不能选择css添加的Before或After文本。

我有一个非常具体的要求，我需要允许用户使用鼠标选择 Before 文本。你会怎么做？

【问题讨论】：

不，你不能。这就是“伪”一词的含义。
问和回答，不止一次。见Is it possible to select css generated content?

标签： html css dom

【解决方案1】：

这不能在 HTML 页面中完成，但作为一种技巧，如果您需要复制/粘贴伪元素，您可以将页面导出为 PDF 并从中复制。例如，在 Chrome 中，您可以从打印预览中复制页面内容。

【讨论】：

这应该是答案，但你仍然应该用“这不能在 HTML 页面内完成”来介绍你的答案。

【解决方案2】：

你不能，before 和 after 伪类并不是为了这个目的而使用的。

【讨论】：

【解决方案3】：

如果用户需要选择生成的文本，则应将其视为内容（并在 HTML 中），而不是呈现（并隐藏在 CSS 中）。

不要使用 ::before 或 ::after，使用 HTML。

您可以使用 JavaScript 插入它（如果有帮助的话）：

var text = document.createTextNode('Before - ');
Array.prototype.forEach.call(document.getElementsByTagName('p'), function (p) {
    p.insertBefore(text.cloneNode(), p.firstChild);
});

这种方式文本本身存在于 DOM 中，与从 CSS 生成的内容不同。

【讨论】：

遗憾的是我需要 DOM 之外的词。如果存在于 HTML 中，则会破坏网站的其他功能。
如果 DOM 中存在某个单词，则调用会中断的东西是非常慷慨的。