Imaginando se é possível, de alguma forma, fazer com que a contentpropriedade CSS insira o código html em vez de uma string :beforeou :afterum elemento como:

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

isso seria bastante útil ... Isso poderia ser feito através de Javascript, mas usar css para isso tornaria a vida mais fácil :)

Infelizmente, isto não é possível. De acordo com a especificação :

O conteúdo gerado não altera a árvore do documento. Em particular, ele não é retornado ao processador da linguagem do documento (por exemplo, para nova correção).

Em outras palavras, para valores de sequência, isso significa que o valor é sempre tratado literalmente. Nunca é interpretado como marcação, independentemente do idioma do documento em uso.

Como exemplo, usando o CSS fornecido com o seguinte HTML:

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

... resultará na seguinte saída:

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

Como quase observado nos comentários da resposta do @ BoltClock, nos navegadores modernos , você pode adicionar alguma marcação html aos pseudoelementos usando o ( url()) em combinação com o <foreignObject>elemento svg's .

Você pode especificar um URL apontando para um arquivo svg real ou criá-lo com uma versão dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Mas observe que é principalmente um hack e que existem muitas limitações:

• Você não pode carregar nenhum recurso externo desta marcação (sem CSS, sem imagens, sem mídia etc.).
• Você não pode executar o script.
• Como isso não fará parte do DOM, a única maneira de alterá-lo é passar a marcação como dataURI e editar esse dataURI em document.styleSheets. para esta parte DOMParsere XMLSerializerpode ajudar .
• Embora a mesma operação nos permita carregar mídia codificada em URL em <img>tags, isso não funcionará em pseudo-elementos (pelo menos a partir de hoje, não sei se ela está especificada em qualquer lugar que não deveria, por isso pode ser um recurso ainda não implementado).

Agora, uma pequena demonstração de alguma marcação html em um 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>

Na mídia paginada CSS3, isso é possível usando position: running()e content: element().

Exemplo do rascunho Conteúdo Gerado em CSS para o Módulo de Mídia Paginada :

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

.runner { 
  position: running(heading);
}

.runner pode ser qualquer elemento e headingé um nome arbitrário para o slot.

EDIT: para esclarecer, basicamente não há suporte para o navegador, então isso foi feito principalmente para referência futura / além das 'respostas práticas' já fornecidas.