Poderia dizer que as pessoas que definem como será o CSS adorariam ser seus melhores amigos. Eles inventam muitas coisas bacanas que tornam o seu dia-a-dia de front-end muito mais legal. E uma dessas coisas super bacanas do CSS é o tal do pseudo-elemento.

Armaria, DC, pseudo-elemento?

Bem, vamos lá! Elemento = TAG. ok? Então, quando a gente ler por aí PSEUDO-elemento, pense em uma tag que estaria no código mas não está e ainda assim você conseguirá acessar, definir estilo e, pasme, conteúdo também.

Veja uma simulação em HTML do que seria os pseudo-elementos ::before e ::after

See the Pen CSS – Simulando ::before & ::after by Dennis Calazans (@denniscalazans) on CodePen.

Agora veja o que foi feito acima utilizando os pseudo-elementos ::before e ::after. Observe que agora, utilizamos a content: “ANTES “ e content: ” DEPOIS” para definir o que vai ser inserido como conteúdo. Não esqueça de conferir todas as abas (html, css e resultado). Repare também que para o a::after é utilizado um mix de valores que inclui texto e o “valor função” attr(href), que é capaz de pegar o valor da propriedade HREF do link.

See the Pen CSS – Exemplo de ::before & ::after by Dennis Calazans (@denniscalazans) on CodePen.

Então, ao utilizar os pseud-elementos, você tem que ter em mente que esses pseudo-elementos ficam dentro do elemento que é alvo da regra CSS e que ele tem display: inline por padrão. Logo, se você precisar definir largura e altura precisará, no mínimo, alterar para display: inline-block ou display: inline-block ou outro valor de display que for mais adequado.

O grande lance desse pseudo-elementos é o conteúdo que você pode definir. Pode, inclusive, ser um conteúdo dinâmico, como o apresentado no exemplo anterior e nesse post. Existe também no w3c uma página que apresenta todos os valores possíveis para content.

Quero ver agora você fazendo.  Faça o seu (code) pen e mande o link pelos comentários! Um abraço!!!