They represent pseudo-elements, which you do not include directly in your markup, but are available to 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 fairly self-explanatory:

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

source: link

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

::before e ::after pseudo-elements work in the same way and work in partnership with a property called content . The content property is for inserting 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>.

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

Supported Browsers

Source: Pseudo-elements