Lassen Benutzer Pseudo-Element mit der Maus

Question

Hallo Ich habe eine HTML-Seite, die Pseudo-Element verwendet Wir haben eine Auswahlklasse auf das Element festgelegt, um Hintergrundfarbe rot.

div:after { 
 
    content: " Me too !"; 
 
    position: absolute; 
 
} 
 
::selection { 
 
    background: red; 
 
}

<div>Select Me.</div>

Bitte vorschlagen, wie Pseudoelement wählbar zu machen.

Ich kann die aktuelle Struktur nicht ändern.

Answer 1

Kurze Antwort ist, dass Sie nicht "wählen", um ein Pseudo-Element.

Lange Antwort ist, können Sie gefälschte es ein bisschen durch, um zu sehen prüft wird, ob ein Benutzer Text in Ihrem div so etwas wie gewählt hat:

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! 
    } 
}); 

Dann je nachdem, wie Sie das Verhalten sein wollen, könnten Sie hinzufügen eine Klasse für das Element, um das :: after-Element anders zu formatieren, und dann den Inhalt des after-Elements an die Benutzerauswahl über:

anhängen