하이퍼 링크가있는 새 텍스트를 CSS의 페이지에 삽입하려면 어떻게합니까?

Question

다음과 같은 코드가 있다고 해봅시다.

... 
<div id="originalContent">Foo</div> 
... 

CSS를 사용하여 "Foo"다음에 "Bar"를 삽입하고 "Bar"를 하이퍼 링크로 만들려면 어떻게합니까 :

... Foo Bar ...

"Foo Bar"라고 쓰는 것을 알고 있습니다.

#originalContent:after { content: " Bar"; } 

하지만 "바"하이퍼 링크를 만드는 방법을 알 수 없습니다. 어떤 아이디어?

Answer 1

내가 아는 한, 당신은 단지 CSS로 할 수 없다. 하지만 가능한 경우에도 JavaScript를 대신 사용하는 것이 좋습니다. CSS는 스타일 및 레이아웃 정보를 지정하는 데에만 사용해야합니다.

특히 라이브러리를 사용하는 경우 자바 스크립트를 사용하여 div에 링크를 추가하는 것이 매우 쉽습니다. 당신이 라이브러리를 사용하지 않을 경우

$("#originalContent").append("<a href='bar.html'>Bar</a>"); 

가 여기에 기본 DOM 작업에 사용하는 예제입니다 : 당신이 기본 DOM 조작을 사용하여 볼 수 있듯이

var link = document.createElement("a"); 
link.href = "bar.html"; 
link.appendChild(document.createTextNode("Bar")); // This sets the link's text 
document.getElementById("originalContent").appendChild(link); 

을 매우 여기에 jQuery를 사용하여 예입니다 좀 더 많은 작업이 필요하지만 이것이 필요한 유일한 JavaScript 기능인 경우 전체 라이브러리를 다운로드 할 가치가 없을 수 있습니다.

Answer 2

이 작업을 수행 할 수 없습니다. 링크는 CSS의 속성이 아닙니다.