23 de julho de 2012 CSS

Como usar o :before e o :after

Como utilizar os pseudo-elementos :before e :after com a propriedade content.

Por Diego Eis

Muito parecido com as pseudo-classes os pseudo-elementos são elementos inseridos dinamicamente via CSS. No caso das pseudo-classes, o browser finge que insere uma classe dinâmica em um elemento para que você customize um determinado estado do elemento. Por exemplo, a pseudo-classe :hover estiliza o estado de quando o mouse é colocado em cima dos elementos. Os pseudo-elementos funcionam quase da mesma forma. Existem vários, mas eu vou me focar agora apenas no :before e no :after. Ambos funcionam da mesma forma.

Os pseudo-elementos :before e :after trabalham em parceria com uma propriedade chamada content. Veja o pedaço de código abaixo:

Eu começo selecionando o elemento a. Com o pseudo-elemento :before eu digo ao navegador que quero fazer algo no início deste elemento. A propriedade content serve para inserir conteúdo dinâmico no HTML. Nesse caso, estou inserindo uma “setinha” antes do objeto. É mais ou menos como no JQuery, quando você utiliza as funções prepend (:before) e append (:after).

Eu posso estilizar da maneira que eu quiser novo elemento. É como se você colocasse um span com algum conteúdo. Logo, você pode fazer algo como o código abaixo:

Tem algumas limitações, por exemplo, eu não posso colocar vários elementos e também não consigo colocar código HTML.
Mesmo assim, podemos “criar” este elemento e colocar uma imagem de background ou até mesmo inserir uma font-icon para facilitar a inserção de ícones no layout.

Lembrando que isso só funciona a partir do IE8.