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