选择 ::before 或 ::after 伪元素中的文本

问题描述 投票：0回答：4

看这个非常简单的代码

<!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 添加的之前或之后的文本。

enter image description here

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

html css dom
4个回答
17
投票

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

14
投票

你不能，之前和之后的伪类不适合用于此目的。

4
投票

如果用户需要选择生成的文本，则应将其视为内容（且在 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 生成的内容不同。

0
投票

CSS 属性 

user-select
怎么样？难道不应该允许用户选择 
::before
或 
::after
内容吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.