Como posso inserir um novo texto com um hiperlink em uma página no CSS?

Question

Diga que tenho o seguinte código:

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

Como posso usar o CSS para inserir "barra" depois de "foo" e fazer "bar" um hiperlink, assim:

... foo Bar...

Eu sei que isso escreveria "Foo Bar":

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

Mas não consigo descobrir como fazer "barra" um hiperlink. Alguma ideia?

Answer 1

Até onde eu sei, você não pode fazer isso apenas com CSS. Mas, mesmo que você pudesse, eu ainda recomendo o uso de JavaScript. O CSS deve ser usado apenas para especificar informações de estilo e layout.

É bastante fácil anexar um link para um div usando o JavaScript, especialmente se você usar uma biblioteca. Aqui está um exemplo usando jQuery:

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

Caso você não queira usar uma biblioteca, aqui está um exemplo usando operações nativas de 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);

Como você pode ver, o uso de operações DOM nativas é um pouco mais de trabalho, mas se essa for a única funcionalidade JavaScript que você precisa, pode não valer a pena baixar uma biblioteca inteira.

Answer 2

Você não pode fazer isso. Os links não são propriedades do CSS.