O ::beforee ::afterpseudo-elementos em CSS permite inserir conteúdo em uma página sem necessidade de estar no HTML. Embora o resultado final não esteja realmente no DOM, ele aparece na página como se estivesse e seria essencialmente assim:

• Você deseja que o conteúdo gerado venha antes do conteúdo do elemento, posicionalmente.
• O ::afterconteúdo também está “depois” na ordem de origem, então ele será posicionado em cima de :: antes se empilhado um em cima do outro naturalmente.

Observe que o conteúdo ainda está dentro do elemento ao qual é aplicado. A nomenclatura parece que pode vir, sabe, antes ou depois do elemento, mas é realmente antes ou depois do outro conteúdo interno .

Vamos criar um exemplo.

<style>
div::before {
white-space: pre;  
content: "esse conteudo \A \A vai acima<...";
}
div::after {
white-space: pre;
content: "esse conteudo  \A \A vai abaixo...";
}
</style>
<div>
  
  <!-- meio da div-->
  
</div>