Javascript 让用户使用鼠标选择伪元素

你好，我有一个使用伪元素的html页面 我们在元素上设置了一个选择类，将背景色设置为红色

div:after{
内容：“我也是！”；
位置：绝对位置；
}
：：选择{
背景：红色；
}

---

选择我。

简而言之，您不能“选择”伪元素

详细的回答是，您可以通过检查用户是否在您的div中选择了类似以下内容的文本来假装它：

var element = document.querySelector('div');
var elementText = element.innerText || element.textContent;

element.addEventListener('onmouseup', function() {
  var selectedText;
  var afterText;

  if (window.getSelection) {
    selectedText = window.getSelection().toString();
  } else if (document.selection && document.selection.type === "Text") {
    selectedText = document.selection.createRange().text;
  }

  if (selectedText === elementText) {
    // We've selected the div's text!
  } 
});

然后，根据您希望行为的方式，您可以向元素添加一个类，以对：：after元素进行不同的样式设置，然后通过以下方式将after元素的内容附加到用户选择中：

var afterText = window.getComputedStyle(element, ':after').content;

---

伪元素不用于内容，仅用于视觉样式。是。。但是有没有办法解决这个问题？不要使用伪元素？我只能使用这个结构：（可能是