Wie kann ich mit einem Hyperlink zu einer Seite in CSS neuen Text einfügen?

Question

Sprich ich habe den folgenden Code:

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

Wie kann ich CSS "Bar" nach "Foo" einfügen und "Bar" einen Hyperlink machen, wie folgt aus:

... Foo Bar ...

Ich weiß, dass dies würde schreiben "Foo Bar":

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

, aber ich kann nicht herausfinden, wie „Bar“ ein Hyperlink zu machen. Irgendwelche Ideen?

Answer 1

Soweit ich weiß, kann man tun, dass nicht nur mit CSS. Aber selbst wenn Sie könnten, würde ich immer noch statt mit JavaScript empfehlen. CSS sollte nur verwendet werden, um Stil und Layout-Informationen angeben.

Es ist ziemlich einfach einen Link zu einem div mit JavaScript anhängen, vor allem, wenn Sie eine Bibliothek verwenden. Hier ist ein Beispiel mit jQuery:

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

Falls Sie nicht wollen, um eine Bibliothek verwenden, hier ist ein Beispiel unter Verwendung von nativen DOM-Operationen:

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

Wie Sie mit nativen DOM-Operationen sehen ist, ein bisschen mehr Arbeit, aber wenn dies die einzige Funktionalität JavaScript ist, dass Sie benötigen, könnte es nicht wert, das Herunterladen eine ganze Bibliothek sein.

Answer 2

Sie können dies nicht tun. Links sind nicht Eigenschaften des CSS.