css - 如何在 CSS 中将带有超链接的新文本插入页面？

Question

假设我有以下代码：

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

如何使用 CSS 在“Foo”之后插入“Bar”并使“Bar”成为超链接，如下所示：

...富酒吧...

我知道这会写成“Foo 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 的属性。