代码之家  ›  专栏  ›  技术社区  ›  sfarbota

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

  •  1
  • sfarbota  · 技术社区  · 15 年前

    假设我有以下代码:

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

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

    ……福 Bar ...

    我知道这会写“Foo Bar”:

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

    但我不知道如何使“酒吧”成为超链接。有什么想法吗?

    2 回复  |  直到 13 年前
        1
  •  3
  •   Xavi Arik G    15 年前

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

    使用JavaScript将链接附加到div相当容易,特别是在使用库的情况下。下面是一个使用jQuery的示例:

    $("#originalContent").append("<a href='bar.html'>Bar</a>");
    

    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功能,那么下载整个库可能就不值得了。

        2
  •  0
  •   Chuck    15 年前