Olá pessoal hoje eu quero falar um pouco sobre o CSS Pseudo-elementos :after e :before, esse elemento só funciona com o browsers mais novos, então se você tentar usa-lo em um IE7/IE8 da vida ele não irá funcionar 100%.
Bem se vocês nunca trabalharam com esses seletores eu vou dar uma breve introdução a eles:
O seletor :after inseri conteúdos depois de um determinado elemento(s).
O seletor :before inseri conteúdos antes de um determinado elemento(s).
Alguns de vocês devem ter usado esse seletor com esse propósito algumas vezes:
li:before{
content:" - ";
}
O que isso faz, ele adiciona um ” – ” antes de todos as <li>, mas vamos evoluir um pouco mais, que tal pegar esses seletores e dividir uma DIV em dois pedaços, isso mesmo não precisa mas criar duas DIVs para fazer um “acabamento personalizado”.
É muito simples, vamos começar usando somente uma DIV global e uma outra para aplicarmos essas marcações:
<div class="main">
<div class="cores"></div>
</div>
Agora vamos começar a utilizar o css, mas antes de tudo é importante lembrar que é preciso englobar ele dentro de um elemento com a marcação “position: relative;” porque vai ser necessário trabalhar com “position: absolute;”:
.main{
margin: 0 auto;
width: 990px;
position: relative;
}
Nessa parte vou começa a aplicar as marcações necessárias, para que tudo funcione corretamente:
.cores:before, .cores:after{
width: 50px;
height: 50px;
z-index: 1;
position: absolute;
content: "";
display: block;
top: 0;
}
Eu fiz um css bem básico, como vocês podem ver eu só coloquei o tamanho que vai ser 50×50 nesse exemplo, mas vocês podem colocar um tamanho personalizado para cada parte é só fazer o mesmo procedimento de cima para cada parte, exemplo:
.cores:before{
width: 100px;
height: 60px;
}
.cores:after{
width: 30px;
height: 90px;
}
PS.: Não vai ser necessário aplicar o width e o height com eu citei no exemplo anterior, porque nós colocamos tamanhos personalizados para cada um.
Agora para finalizar eu vou adiconar cores diferentes e a posição, mas vocês também podem colocar um background-image para cada, somente não vai funcionar se vocês adicionarem uma <img> dentro da DIV, porque como ela é a mesma DIV ela não irá funcionará corretamente.
.cores:before{
background: red;
left: 0;
.cores:after{
background: blue;
right: 0;
}
Vocês podem ver nesse link como ficou o procedimento finalizado ou se preferir podem fazer o download do mesmo.
Espero que vocês tenham gostado deste post e até breve, por favor se gostou compartilha o post e se tiver dúvida ou sugestão, por favor deixe um comentário. Até Mais
