Как вставить новый текст с гиперссылкой на страницу в CSS?

Question

Скажем, у меня есть следующий код:

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

Как я могу использовать CSS, чтобы вставить "Bar" после "Foo" и сделать "Бар" гиперссылке, как это:

... Foo Bar ...

Я знаю, что это было бы написать «Foo Bar»:

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

, но я не могу понять, как сделать «Bar» гиперссылкой. Есть идеи?

Answer 1

Насколько я знаю, вы не можете сделать это только с помощью CSS. Но, даже если бы вы могли, я по-прежнему рекомендую использовать JavaScript. CSS следует использовать только для указания информации о стиле и макете.

Довольно легко добавить ссылку на div с помощью JavaScript, особенно если вы используете библиотеку. Вот пример использования JQuery:

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

В случае, если вы не хотите использовать библиотеку, вот пример с использованием собственных операций 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); 

Как вы можете видеть, используя собственные операции DOM является довольно немного больше работы, но если это единственная функциональность JavaScript, в которой вы нуждаетесь, возможно, не стоит загружать всю библиотеку.

Answer 2

Вы не можете этого сделать. Ссылки не являются свойствами CSS.