How can I insert new text with a hyperlink into a page in CSS?

Question

Say I have the following code:

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

How can I use CSS to insert "Bar" after "Foo" and make "Bar" a hyperlink, like this:

...Foo Bar...

I know that this would write "Foo Bar":

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

but I can't figure out how to make "Bar" a hyperlink. Any ideas?

Answer 1

As far as I know, you can't do that with just CSS. But, even if you could, I'd still recommend using JavaScript instead. CSS should only be used to specify style and layout information.

It's fairly easy to append a link to a div using JavaScript, especially if you use a library. Here's an example using jQuery:

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

In case you don't want to use a library, here's an example using native DOM operations:

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

As you can see using native DOM operations is quite a bit more work, but if this is the only JavaScript functionality you need, it might not be worth downloading a whole library.

Answer 2

You can't do this. Links are not properties of the CSS.