WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Criando elementos dinâmicos com CSS

Publicidade

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
}
elemento

Observações Importantes
Os pseudo-elementos possuem algumas limitações:
- Não suportar diversos conteúdos simultâneamente;
- Não suportam a inserção de códigos HTML.

Publicidade
Postado por: Arthur P. Saborido
Criação e Diagramação

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]