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

【问题标题】：How can I insert new text with a hyperlink into a page in CSS?如何在 CSS 页面中插入带有超链接的新文本？
【发布时间】：2009-10-15 04:58:23
【问题描述】：

假设我有以下代码：

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

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

...Foo Bar...

我知道这会写成“Foo Bar”：

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

但我不知道如何将“Bar”设为超链接。有什么想法吗？

【问题讨论】：

标签： css hyperlink pseudo-element

【解决方案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 功能，则可能不值得下载整个库。

【讨论】：

谢谢。我在 CSS 中做其他所有事情，所以我的想法就是这样。不过，这更有意义。

【解决方案2】：

你不能这样做。链接不是 CSS 的属性。

【讨论】：