如何用超鏈接將新文本插入到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的屬性。