Quando usar o After e Before?

[Marcelosilva10]

Pessoal tenho essa seguinte dúvida, quando a ser usado After e Before e qual momento é necessário a ser usado?

[felipefialho]

Particularmente eu considero o :after e o :before uma das coisas mais incriveis do CSS, pois te dão um mundo de possibilidades.

Você pode usar para resolver basicamente qualquer questão nos detalhes do layout e até mesmo para usar os atributos do HTML para fazer um tooltip foda usando apenas CSS.

E mais uma coisa, lembre-se que com esses pseudo-elementos você consegue transformar um elemento em três. Olha essa minha pen bem antiga (2013, por ai), onde estava justamente testando as possibilidades -> http://codepen.io/LFeh/pen/GxmKH

[felipecotto]

Utilizo bastante para detalhes de layout, bordas, linhas, transições css. macaras em imagens, formas.
Realmente é uma das coisas mais incríveis do CSS.

[felipebernardes]

@Marcelosilva10 vale ressaltarmos a diferença entre usar after e before:

• se você definir content: '', não há diferença alguma.
• se você definir content: 'foo'; em element:before, foo aparecerá antes de todo o conteúdo do elemento. se definir em .element:after, foo aparecerá após todo o conteúdo do elemento.

[leandroruel]

já utilizei bastante, principalmente para criar shapes apenas com css.

[kandebonfim]

@Marcelosilva10 usei recentemente pra criar essas janelinhas:

A barra com o nome da janela e os 3 botões foram feitos com pseudoelementos. No final o HTML só precisa ter uma div. Eu me amarro quando dá pra fazer esse tipo de coisa.

Link do projeto em que eu usei isso: https://kandebonfim.github.io/show-your-terms/