如何用超链接将新文本插入到CSS中的页面中？

Question

说我有下面的代码：

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

如何使用CSS来插入“酒吧”，“富”后，使“酒吧”的超链接，就像这样：

...美孚Bar ...

我知道这会写“福吧”：

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

，但我无法弄清楚如何使“酒吧”的超链接。有任何想法吗？

Answer 1

据我所知，你不能用CSS来做到这一点。但是，即使你可以，我仍然建议使用JavaScript代替。 CSS只能用于指定样式和布局信息。

这是相当容易的添加一个链接到使用JavaScript一个div，特别是如果你使用一个库。下面是使用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的属性。