Solo me pregunto si de alguna manera es posible hacer que la contentpropiedad CSS inserte código html en lugar de una cadena :beforeo :afterun elemento como:

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

esto sería bastante útil ... Se podría hacer a través de Javascript, pero usar CSS para esto realmente facilitaría la vida :)

Desafortunadamente, esto no es posible. Por la especificación :

El contenido generado no altera el árbol de documentos. En particular, no se retroalimenta al procesador de lenguaje de documentos (por ejemplo, para volver a analizar).

En otras palabras, para los valores de cadena esto significa que el valor siempre se trata literalmente. Nunca se interpreta como marcado, independientemente del idioma del documento en uso.

Como ejemplo, usando el CSS dado con el siguiente HTML:

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

... dará como resultado la siguiente salida:

<a href="#top"> Volver </a> Título

Como casi se señaló en los comentarios a la respuesta de @ BoltClock, en los navegadores modernos , en realidad puede agregar un marcado html a pseudoelementos usando el ( url()) en combinación con el <foreignObject>elemento svg .

Puede especificar una URL que apunte a un archivo svg real o crearla con una versión dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Pero tenga en cuenta que es principalmente un hack y que hay muchas limitaciones:

• No puede cargar ningún recurso externo desde este marcado (sin CSS, sin imágenes, sin medios, etc.).
• No puedes ejecutar el script.
• Como esto no formará parte del DOM, la única forma de alterarlo es pasar el marcado como dataURI y editar este dataURI document.styleSheets. para esta parte, DOMParsery XMLSerializerpuede ayudar .
• Si bien la misma operación nos permite cargar medios codificados con URL en las <img>etiquetas, esto no funcionará en pseudoelementos (al menos a partir de hoy, no sé si se especifica en algún lugar que no debería, por lo que puede ser una característica aún no implementada).

Ahora, una pequeña demostración de algunas marcas html en un pseudo elemento:

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>

En los medios paginados CSS3 esto es posible usando position: running()y content: element().

Ejemplo del contenido generado por CSS para el borrador del módulo de medios paginado :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner puede ser cualquier elemento y headinges un nombre arbitrario para la ranura.

EDITAR: para aclarar, básicamente no hay soporte para el navegador, por lo que esto estaba destinado principalmente para referencia futura / además de las 'respuestas prácticas' ya dadas.