Pseudo-elementos?

Abordaremos basicamente os pseudo-elementos ::after e ::before, hoje aprenderemos que esses caras são muito importantes para a qualidade de nossos desenhos.

Vamos lá ;)

::after e ::before?

Os pseudo-elementos ::after e ::before do CSS3 servem para adicionar alguma formatação ou conteúdo antes ou depois de um elemento.

Notem que no exemplo acima, usamos o ::before em conjunto com o content para inserir um texto no início da div e usamos o ::after também em conjunto com o content para adicionar um texto no final.

Dica: "Nos pseudo-elementos, é indicado na CSS3 usar o ::before e ::after para diferenciar das pseudo-classes, porém o uso de :before e :after é aceito na CSS2.1" - Deivid Marques

Adicionando formatação

Textos podem ser muito úteis em nossa vida normal como desenvolvedores, mas para nossos desenhos o que interessa de verdade é o poder de passar uma formatação através de nosso novos amigos.

Acabamos de adicionar um conteúdo vazio com content: " ";, depois simulamos um comportamento de elemento com display: inline-block;, dessa forma meio que criamos uma <div> dentro do nosso elemento. Vamos ver mais um exemplo para entender melhor.

Posicionamento

Podemos usar nossos conhecimentos de posicionamento para recriar nosso coração sem a necessidade de usar duas divs(circulos) dentro da <div> principal(quadrado), substituindo elas por pseudo-elementos.

Agora conseguimos desenhar um coração com uma unica <div> <3

Conclusão

Apesar de simples, da para fazer muita coisa legal e reduzir bastante o tamnho do nosso HTML, o que em desenhos mais complexos é muito importante ;)

Até amanhã.

<-- #6 - Sombras | Lista completa | #8 - Animações (parte 2) -->


1,062 2 5