Como vc colocou tag CSS na pergunta vou te dar uma resposta só com CSS.
Todo o conteúdo que vc coloca dentro de um content:
de um pseudo-elemento é renderizado como texto e não como código, pois ele é um conteúdo que não existe no DOM do HTML, ele é construído no CSS.
Veja o exemplo e cloquei no checkbox
.
input:checked + div::after {
content: "<h1>minha tag</h1>"
}
<input type="checkbox" name="" id="">exibir tag
<div></div>
Opção 2
Vc tb pode escrever seu HTML direto em um custom attribute direto na tag (ex: <div data-html="<h1>meu h1</h1>">
), depois vc pode usar um pseudo elemento com content:attr(data-html)
para pegar o que está em data-html=""
e colocar na tela.
input:checked + div::after {
content: attr(data-html);
}
<input type="checkbox" name="" id="">exibir tag
<div data-html="<h1>meu h1</h1>"></div>
OBS1: Fiz esse exemplo da forma mais simples possível apenas para fins didáticos
OBS2: O inconveniente dessa técnica é que como o texto não está no DOM vc não consegue seleciona-lo para por exemplo dar um Ctrl+C / Ctrl + V