Criando elementos dinâmicos com CSS
CSS - Como criar elementos dinâmicos com CSSCriando 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.
.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.
.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
}
Resultado
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.
Criação e Diagramação
