どのように私はCSSでページにハイパーリンクを使用して新しいテキストを挿入することができますか？

Question

と言う私は、次のコードを持っています：

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

どのように私はこのように、「フー」の後に「バー」を挿入し、「バー」のハイパーリンクにするためにCSSを使用することができます：

... Fooのバーに...

私は、これは "Fooのバーを" 書くでしょうことを知っています：

#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のプロパティではありません。