What is the purpose of the pseudo-elements "::before" and "::after"?

Question

I find many codes that use these pseudo-elements and I "fly" when I see them.

The few tutorials I found on the Internet did not explain clearly and I was left with more doubts.

• After all, what is their purpose/function?

Answer 1

They represent pseudo-elements, which you don’t include directly in your markup, but are available for you to create some interesting effects with CSS. You mentioned ::before ::after, and they represent pseudo-elements that appear before and after their elements.

The full list is included below and should be quite self-explanatory:

::after 
::before 
::first-letter 
::first-line 
::selection

source: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Note the use of the two points, which is consistent with the specification. Sometimes you will see pseudo-elements specified with a single comma, but that was only because we needed to support browsers who do not understand the double-dot syntax.

Answer 2

The pseudo-elements ::before e ::afterwork in the same way and work in partnership with a property called content. The estate content serves to insert dynamic HTML content.

::after

.exciting-text::after {
  content: "<- Agora este *é* emocionante!"; 
  color: green;
}

.boring-text::after {
   content: "<- CHATO!";
   color: red;
}

<p class="boring-text">Aqui está um bom e velho texto chato.</p>
<p> Aqui está um texto moderado que não é nem chato nem excitante.</p>
<p class="exciting-text">Contribuir para o MDN é fácil e divertido.
Basta clicar no botão editar para adicionar novas amostras ao vivo ou melhorar amostras existentes.</p>

::before + ::after

q::before { //Inicio
  content: "«";
  color: blue;
}
q::after { //Fim
  content: "»";
  color: red;
}

<q>Algumas citações</q>, ele disse, <q>são melhores do que nenhum</q>.

Works like the functions prepend (::before) and append (::after) of JQuery!

Supported Browsers

_{Source: Pseudo-elements}