Comment puis-je insérer un nouveau texte avec un lien hypertexte dans une page en CSS?

Question

Dire que j'ai le code suivant:

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

Comment puis-je utiliser les CSS pour insérer « Bar » après « Foo » et faire « Bar » un lien hypertexte, comme ceci:

... Foo Bar ...

Je sais que cela écrirait "Foo Bar":

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

mais je ne peux pas comprendre comment faire « Bar » un lien hypertexte. Toutes les idées?

Answer 1

Pour autant que je sache, vous ne pouvez pas le faire avec juste CSS. Mais, même si vous pouviez, je vous recommande encore l'utilisation de JavaScript à la place. CSS ne doit être utilisé pour spécifier le style et l'information mise en page.

Il est assez facile d'ajouter un lien vers un div en utilisant JavaScript, surtout si vous utilisez une bibliothèque. Voici un exemple en utilisant jQuery:

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

Si vous ne souhaitez pas utiliser une bibliothèque, voici un exemple en utilisant des opérations DOM natif:

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);

Comme vous pouvez le voir en utilisant des opérations DOM natif est un peu plus de travail, mais si cela est la seule fonctionnalité JavaScript dont vous avez besoin, il pourrait ne pas être la peine de télécharger une bibliothèque.

Answer 2

Vous ne pouvez pas le faire. Les liens sont pas les propriétés du CSS.