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]