Question

看一下这个非常简单的代码

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

Css在每个¨Before -"的开头添加<P>并像这样呈现

enter image description here

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

enter image description here

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

Answer 1

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

Answer 2

您不能将前后伪类用于此目的。

Answer 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中生成的内容不同。

选择:: before或:: after之后的文本

3 个答案: