Techno Loop

Before e after são pseudo-classes (como por exemplo :hover) que definem o estado de um elemento e mesmo fazendo parte da biblioteca CSS2, ainda é usado em sites atuais pela fácil implementação nas linhas de código que são apresentadas.
Para começarmos a usar esta pseudo-classe necessitamos apenas de uma chamada para preencher seu conteúdo e depois aplicaremos propriedades normais como em uma div.

#exemplo:before{
   content: "Hello Word!";
}

Você ja deve ter se deparado com a chamada de ambos como por exemplo ::before; ::after, esta é a maneira mais nova criada para diferenciar ela de outras chamadas em que há uma ação do mouse sobre a situação (:hover, :active, etc), mas desta forma alguns navegadores ainda não são capazes de reconhecer e a forma apresentada é a recomendada.

Dicas em palavras (Tooltip)

Primeiramente vamos criar o texto onde queremos que a dica apareça, aplicá-lo em uma tag qualquer (no caso usaremos a tag "a" para que redirecione para outra url), um "title" que preencheremos com a dica que queremos dar ao usuário e uma classe para manipular no css.

HTML:
Aprenda css com <a class="tip" href="#" title="Tutoriais CSS">Technoloop</a>

Após isso vamos começar a estilizá-lo no css:

CSS:
.tip{
   display: inline;
   position: relative;
}

Usaremos posição relative para que as pseudo-classes a seguir sejam relativas ao elemento que estamos manipulando.

.tip:before{
   content: "";
   width: 0;
   height: 0;
   border: 5px solid transparent; /* Tamanho da seta */
   border-top-color: #e53935;
   position: absolute;
   top: -5px;
   right: 50%;
   margin-right: -5px;
}

O tamanho desta seta é a chave de valor tanto para a propriedade top quando para margin-right (para que continue sempre no meio do elemento, independente de sua largura).

.tip:after{
   content: attr(title);
   position: absolute;
   top: -25px;
   left: 0;
   background-color: #e53935;
   color: #fff;
   padding: 0 5px;
   white-space: nowrap;
   border-radius: 3px;
}

O método usado na chamada do conteúdo dessa pseudo classe está sendo utilizada para obter o texto que colocamos no "title" dentro do elemento "a". A propriedade top será o resultado da soma da altura do elemento e do tamanho da seta e é usada como negativa para aparecer fora do elemento e acima do mesmo. No final temos a propriedade white-space com o valor nowrap para que o texto não quebre a linha.

Porque não posso manipulá-lo no javascript?

Temos sempre que ter em mente de que :before e :after, mesmo contendo uma string, não pode ser manipulado como um elemento pois são pseudo-classes, que significa que não fazem parte do DOM de uma página html.

Resultado:

Aprenda css com Technoloop

Teremos como resultado uma das situações que podemos criar e manipular apenas com css, ou seja, sem usar plugins ou javascript que ocasiona em uma lentidão à página para quem não tem acesso a uma internet de boa qualidade (como é o caso de muitas pessoas aqui no Brasil pelas condições financeiras) trazendo uma grande vantagem para que seu código fique mais leve, limpo e didático.