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

Question

Допустим, у меня есть следующий код:

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

Как я могу использовать CSS, чтобы вставить "Bar" после "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.