讓用戶使用鼠標選擇僞元素

Question

你好我有一個使用僞元素的網頁 我們已經在元素上設置了一個選擇類來設置背景顏色爲紅色。

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

<div>Select Me.</div>

請建議如何使僞元素選擇。

我無法更改當前結構。

Answer 1

簡短的回答是，你不能「選擇」一個僞元素。

龍答案是你可以假有點通過檢查用戶是否已經選定的文本在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! 
    } 
}); 

然後取決於你想要怎樣的行爲是，你可以添加一類元素的風格元素之後::不同，再追加後通過元素的內容給用戶選擇：

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