Aprenda a como utilizar os Pseudo-elements ::after e ::before do CSS de forma descomplicada, e veja como esses elementos do CSS3 podem adiantar seu lado no desenvolvimento web.

Pseudo-elements ou como você preferir, Pseudo-elementos, são muito usados em partes especificas de um layout. Com essa propriedade do CSS3 podemos fazer vários ajustes, por exemplo, aplicar um estilo em Heading Tags H1, H2 e H3 ou estilizar a primeira ou ultima letra de um paragrafo. É claro que isso é um pequeno resumo do que podemos fazer com Pseudo-elementos. Neste tutorial iremos focar nos Pseudo-elements ::after e ::before, acompanhe os exemplos abaixo.

E o resultado é esse:
como usar pseudo elementos

Como podemos observar na imagem acima, foi criado uma linha embaixo do h1. Vamos então destrinchar o código e entender como isso é feito.

  1. h1::after – Aqui estou dizendo que eu quero que algo aconteça depois do H1, pois como sabemos, o significado de after é (depois de).
  2. Content:” “ – Essa propriedade sempre vem junto, não tem como nosso código funcionar com esse termo ausente. Inclusive, se você escrever algo entre as aspas,será mostrado na tela, por exemplo, content:”abcdefgh”;
  3. Display:block – Nesse caso especifico é obrigatório acrescentar o display:block para dar certo.

E se quisermos colocar uma alinha na parte de cima? Basta acrescentar o elemento before, vejamos o exemplo.

E o resultado:

pseudo elementos before e after

Acrescentando apenas o elemento before, chegamos no mesmo efeito do after, só que agora na parte de cima. O interessante de usar Pseudo-elements é que não precisamos sujar nosso html para fazer coisas simples como essa que acabamos de ver.

Existem outros Pseudo-elements além do ::after e ::before, por exemplo ::first-letter, ::selection, ::backdrop e ::first-line. Mas isso é assunto para um próximo tutorial.

Publicitário por formação e curioso nas áreas de designer gráfico e programação. Atualmente estudo marketing digital, PHP e JavaScript.