선택 텍스트 :: 이전 또는 :: 의사 요소

봐이 매우 간단한 코드선택 텍스트 :: 이전 또는 :: 의사 요소

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

CSS는 모든 <P>의 시작 ¨Before -"를 추가하고이

enter image description here

같은 렌더링 후 마우스를 사용하여 텍스트를 선택하면 (복사 붙여 넣기 용) 원본 텍스트를 선택할 수 있지만 CSS에서 추가 한 Before 또는 Aftter 텍스트는 선택할 수 없습니다.

enter image description here

내가

내가 사용자가 mosue 전과 텍스트를 선택할 수 있도록해야 할 매우 구체적인 요구 사항을 가지고있다. 어떻게 할 건데?

출처

2014-12-10 Ricardo Polo

아니요. 그것이 "의사"라는 말의 의미입니다. – Leo

한 번 이상 묻고 응답했다. [CSS로 생성 된 콘텐츠를 선택할 수 있습니까?] (http://stackoverflow.com/questions/24385171/is-it-possible/to-select-css-generated-content) –

이전 및 이후 가상 클래스는 그 용도로 사용되지 않습니다.

출처

2014-12-10 02:14:28 Eyal

사용자가 생성 된 텍스트를 선택해야하는 경우 프리젠 테이션이 아닌 콘텐츠 및 HTML로 간주되어야하며 CSS에서는 숨겨져 있어야합니다.

::before 또는 ::after을 사용하지 마십시오. HTML을 사용하십시오.

당신은 (즉, 도움이 될 경우)를 삽입 자바 스크립트를 사용할 수 있습니다

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

이 방법은 텍스트 자체가 CSS에서 생성 된 내용과는 달리 DOM에 존재한다.

출처

2014-12-10 02:14:41

슬픈 듯이 DOM 외부 단어가 필요합니다. . HTML에있는 경우 웹 사이트의 다른 기능을 손상시킵니다. –

일부 단어가 DOM에 존재하는 경우 "기능"이 깨지는 것을 매우 관대합니다. –

해킹으로 의사 요소를 복사/붙여 넣기해야하는 경우 페이지를 PDF로 내보내고 복사 할 수 있습니다. 예를 들어 크롬에서는 인쇄 미리보기에서 페이지의 콘텐츠를 복사 할 수 있습니다.

출처

2015-03-20 11:29:45 Alex

현명한 해결 방법! –

선택 텍스트 :: 이전 또는 :: 의사 요소

답변

관련 문제