Selezionare testo in :: :: prima o dopo la pseudo-elemento

Guardate questo semplice codiceSelezionare testo in :: :: prima o dopo la pseudo-elemento

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

Css aggiunge ¨Before -" all'inizio di ogni <P> e rende in questo modo

enter image description here

Se si utilizza il mouse per selezionare il testo (per copia incolla) è possibile selezionare il testo originale, ma non il testo Prima o Aftter aggiunto da css.

enter image description here

Ho un requisito molto specifico in cui ho bisogno per consentire agli utenti di selezionare con il mosue il testo prima. Come lo faresti?

fonte

2014-12-10 Ricardo Polo

No, non è possibile. Questo è ciò che la frase "pseudo" significa. – Leo

Chiesto e risposto, più di una volta. Vedi [È possibile selezionare il contenuto generato in css?] (Http://stackoverflow.com/questions/24385171/is-it-possible-to-select-css-generated-content) –

Non è possibile, le pseudo classi prima e dopo non sono pensate per essere utilizzate a tale scopo.

fonte

2014-12-10 02:14:28 Eyal

Se gli utenti devono selezionare il testo generato, deve essere considerato contenuto (e nell'HTML), non presentazione (e nascosto nel CSS).

Non utilizzare ::before o ::after, utilizzare HTML.

Potreste usare Javascript per inserirla (se che avrebbe aiutato):

var text = document.createTextNode('Before - '); 
Array.prototype.forEach.call(document.getElementsByTagName('p'), function (p) { 
    p.insertBefore(text.cloneNode(), p.firstChild); 
});

In questo modo il testo stesso è presente nel DOM, a differenza di contenuto generato dai CSS.

fonte

2014-12-10 02:14:41

Purtroppo ho bisogno della parola al di fuori del DOM . Se è presente nell'HTML, rompe un'altra funzionalità del sito web. –

Chiamare qualcosa che si rompe se qualche parola è presente nel DOM una "caratteristica" è abbastanza generosa. –

Come un trucco, se è necessario copiare/incollare elementi pseudo, è possibile esportare la pagina in PDF e copiarla da essa. In Chrome, ad esempio, puoi copiare il contenuto della pagina dall'anteprima di stampa.

fonte

2015-03-20 11:29:45 Alex

Soluzione intelligente! –

Selezionare testo in :: :: prima o dopo la pseudo-elemento

risposta

Problemi correlati