CSS content property: is it possible to insert HTML instead of Text?

Question

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like:

.header:before{
  content: '<a href="#top">Back</a>';
}

this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :)

Answer 1

Unfortunately, this is not possible. Per the spec:

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.

As an example, using the given CSS with the following HTML:

<h1 class="header">Title</h1>

... will result in the following output:

<a href="#top">Back</a>Title