Question

说我有以下代码：

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

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

...... Foo Bar ...

我知道这会写“Foo Bar”：

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

但我无法弄清楚如何使“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的属性。

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

2 个答案: