Criando pseudo-elementos ":after" e ":before" com CSS

Informação
Assim como as pseudo-classes (":hover", por exemplo) que encontramos no css, os pseudo-elementos são elementos criados exclusivamente via css e inseridos dinamicamente no html do site. Existem diversos pseudo-elementos, mas neste artigo focaremos apenas no ":after" e ":before".

Os pseuso-elementos ":after" e ":before", assim como o próprio nome indica, são utilizados para inserir um determinado conteúdo antes ou depois de um determinado elemento, independente do elemento selecionado.

Eles são muito úteis para a inserção de conteúdos dinâmicos no site sem a necessidade de criar elementos extras (divs, span, strong, etc) no código HTML.

Obs: Vale lembrar que esses pseudo-elementos são reconhecidos em todos os navegadores mais recentes com excessão do Internet Explorer 7 ou anterior.

Como Funciona

.elemento:after {   
content:"";  
width:200px;  
height:40px;  
background:#ff0000;
}
O primeiro passo é selecionar a qual div o pseudo-elemento irá se relacionar (neste caso, a div com a classe elemento) e em seguida indicar para o navegador se o pseudo-elemento será inserido antes (:before) ou depois (:after) do elemento indicado.

Utilizando a propriedade content serve para indicar qual conteúdo dinamico que será inserido. Neste exemplo, adicionaremos uma caixa vermelha acima de uma div que já existe no conteúdo HTML do site.

Veja o exemplo:

.elemento {   
width:300px;  
line-height:100px;  
height:100px;  
background:#000;  
position:relative;  
text-align:center;  
color:#FFF
}.
elemento:after {  
content:"after";  
width:200px;  
line-height:40px;  
height:40px;  
background:#ff0000;  
position:absolute;  
top:-40px;  
left:0;  
color:#FFF; 
  text-align:center
}
Caio Vargas
Atendimento Whatsapp
Iniciar Atendimento!