Usando o After e Before do CSS3

• Home-
• CSS 3/
• autor: Adriano Meira /
• publicado em: 28/12/2011

Olá pessoal hoje eu vi uma coisa muito bacana e queria compartilhar com vocês, lendo um artigo do site Codrops vi que eles estavam utilizando uma propriedade não muito nova mas porém esquecida do CSS que voltou com força e melhorias no CSS3 que é o Pseudo seletor before e after.

Mas antes de falar deles vamos ao conceito básico seletores em CSS são os elementos que compõe sua marcação de HTML como por exemplo o seletor de links é o atributo <a> e a ele podemos dar estilos, caminho, relações, e etc. Os pseudos elementos são elementos criados “entorno”  do elemento ou seja se declaramos que um elemento de link tem um texto antes, o navegador irá “escrever” este texto antes do do seletor.

Os pseudos seletores não são compatíveis no explorer 6 que a ainda uma grande fatia do mercado de navegadores mas já no explorer 7 e 8 tem amplo suporte a esta técnica.

Veja na tabela abaixo os pseudo seletores aceitos pelos navegadores

Pseudo Name	Descrição
:after	Adiciona o conteúdo depois de um elemento
:before	Adiciona o conteúdo antes de um elemento
:first-letter	Adiciona um estilo para o primeiro caractere de um texto
:first-line	Adiciona um estilo à primeira linha de um texto

Agora que sabemos mais sobre seletores e seus pseudos vamos brincar um pouco com o before e after, neste exemplo imaginamos que criamos toda nossa folha de estilo e aplicamos em várias páginas, ai você me diz que precisa colocar na frente de cada título um elemento gráfico como uma “setinha“, ok você vai me dizer: é só desenhar e coloca no background do título colocando um padding-left da largura da imagem. Porém seu título já tem um background de imagem e ai o que fazer?

Você pode utilizar o pseudo seletor “after” e ali acrescentar esta imagem como funciona? Veja no exemplo abaixo

.titulo{
	background:url(imagem.png) repeat-x bottom;
	padding:5px;
	font-size:14px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}

.titulo:after{
	width:30px;
	height:30px;
	background:url(setinha.png) no-repeat;
	content:" ";
}

Veja que  o nosso seletor “.titulo” recebe antes dele uma caixa de 30x30px com uma imagem de fundo sem conteúdo. Esta ferramenta possibilita você criar elementos ou textos antes de cada seletor que tiver o estilo que criar, no caso acima o “.titulo” .

Neste artigo do Codrops veja como eles trabalharam além do efeito do After e Before outras propriedades como o Routate.

 

---

Tweet