Logotipo WebingPro.
Menu
Background Image
Voltar para a página anterior

CSS: Pseudo-elementos ::before ::after

Postado por Gabriel Ferreira em 28/03/2015 às 06:02

Background Image

Fala galera, tranquilo? Aqui é “O Estagiário” (haha), bom falei que ia trazer tutoriais pra galera que ta iniciando, e resolvi começar falando sobre pseudo-elementos, mais especificamente ::before e ::after, sei que tem gente que já conhece mas também sei que tem uma galera que só conhece pseudo-classes :active :hover :visited.

Então, pra quem não sabe o que são pseudo elementos:

Pseudo-elementos são usados para estilizar partes especificas de elementos. Exemplo:

  • Estilizar a primeira letra ou linha de um elemento.
  • Inserir conteúdo antes ou depois de um elemento.

Existe uma pequena diferença entre pseudo-elementos e pseudo-classes. Usamos pseudo-classes para definir um estado diferente para nosso elemento, com por exemplos nossas conhecidas :hover :active :visited (existem varias outras).

Bom, chega de teoria, vamos brincar um pouco! Que tal fazermos uma faixa com ::before e ::after?

Vamos criar uma section com um h1 pra começar. Monte a estrutura minima HTML e coloque:

Okay, vamos usar um pouquinho de CSS pra definir a largura da section e a posição do h1.

Até aqui temos:

Agora vamos deixar o h1 com cara de faixa!

Com left: -10px e width: 420px fazemos com que a faixa saia da nossa section. Até aqui:

Agora vamos fazer um efeito da faixa contornando nossa section usando pseudo-elementos começando com o ::before para fazer no lado esquerdo.

Então temos:

Explicando, usamos o ::before assim como usamos um :hover. Utilizando position left e top posicionamos no canto superior esquerdo nosso ::before que transformamos num quadradinho. Porém para conseguirmos um efeito legal, vamos transforma-lo em um triângulo, ajustando suas bordas.

Com isso temos:

Beleza, conseguimos esse efeito mudando alguns lados do nosso before para transparent, para conseguirmos o mesmo efeito no outro lado basta usarmos o ::after e invertermos alguns detalhes, bora lá!

EEEEEE PAM PARARAM!

Uma mega fucking faixa bolada dahora style pra cara***. =DDD

Bom galera aqui foi apenas para exemplificar o uso, agora por exemplo, aqui na WebingPro precisei fazer um menu que tinha um detalhe, uma barrinha antes e depois que separava cada opção. Esse aqui:

Para resolver isso foi bem simples, com before eu apliquei em todas as li a barrinha(li::before), porém na ultima opção eu precisava da barrinha na direita, então o que eu fiz? com a pseudo-classe last-child e o pseudo elemento :after eu coloquei ela!(li:last-child::after), ta ai um exemplo de uso pratico e real!

Eu aprendi isso, com o livro HTML5 e CSS3: Domine a web do futuro esse exemplo da faixa e vários outros você vai encontrar nele, realmente um excelente livro pra quem ta começando!

É isso galera, vou me despedindo, espero que eu tenha contribuído com o conhecimento de vocês, e que  tenham curtido! Como esse é meu primeiro post, digamos técnico, gostaria do feedback de vocês nos comentários, e também se ficou duvida, achou um erro, pode comentar ai também fique à vontade!

Conheça o autor do post

Gabriel Ferreira:
Notice: the_author_description está obsoleto desde a versão 2.8.0! Use the_author_meta('description') em seu lugar. in /home/webingpro/www/blog/wp-includes/functions.php on line 3830
Eu sou de aquário, adoro unicórnios e paçoca .. brink's, papo sério agora. Eu conheci programação com 15 anos, e desde então sou fascinado por software, aplicações e web. Aprendi JAVA no curso técnico, e PHP por conta, lendo livros e etc, em 2013 fui ao FISL (Fórum internacional de software livre) e conheci o Python, uma linguagem que ainda não domino, mas se tornou minha favorita.

  • Asafe Damasceno dos Santos

    Muito massa !!! Post bem didático e facil de aprender !! Valeu Gabriel !!

    • Gabriel Ferreira

      Obrigado parça! Estamos ai pra ensinar o máximo!

  • Deangelis Pedro