¿Cómo puedo insertar un nuevo texto con un hipervínculo en una página en CSS?

Question

Decir que tengo el siguiente código:

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

¿Cómo puedo utilizar CSS para insertar "bar" después de "Foo" y hacer "bar" en un hipervínculo, como esto:

Bar ...

Sé que esto sería escribir "Foo bar":

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

pero no puedo encontrar la manera de hacer "bar" en un hipervínculo. ¿Alguna idea?

Answer 1

Por lo que yo sé, no se puede hacer eso con sólo CSS. Pero, incluso si se pudiera, aún así, recomiendo el uso de JavaScript en su lugar. CSS sólo se debe utilizar para especificar el estilo y la información de diseño.

Es bastante fácil para añadir un enlace a un div usando JavaScript, especialmente si se utiliza una biblioteca. Aquí hay un ejemplo usando jQuery:

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

En caso de que no desee utilizar una biblioteca, esto es un ejemplo usando operaciones DOM orígenes:

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

Como se puede ver usando operaciones DOM nativos es un poco más de trabajo, pero si esta es la única funcionalidad de JavaScript que necesita, puede que no sea la pena descargar una biblioteca entera.

Answer 2

No se puede hacer esto. Los enlaces no son propiedades del CSS.