Como inserir conteúdo em uma página com CSS sem necessidade de estar no HTML


::before::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.
  • ::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>


 

 

Categoria: css | Tags: , , , | Postado por joemaster em 15/ago/2020

<< Anterior

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *