Ir para conteúdo / Skip to content

OS PSEUDO-ELEMENTOS :AFTER E :BEFORE

Postado em: 13 de setembro de 2006 por Pedro Rogério

Os pseudo elementos :after e :before servem para inserir conteúdo gerado depois ou antes de cada elemento. Um exemplo de uso seria se quisessemos inserir conteúdo depois e antes dos links. Veja o código:


<div id="link1">
   <a href="#">Contato</a>
</div>
<div id="link2">
    <a href="#">Sobre</a>
</div>

E o nosso CSS fica da seguinte forma:


#link1:after { content: "Exemplo de After"; }
#link2:before { content: "Exemplo de Before"; }

Veja um exemplo em funcionamento, mas se você usa o IE como browser, não vai conseguir ver essa propriedade em funcionamento, eu aconselho você então a usar um outro browser como o Opera, ou o Firefox.

Se tiver um tempo, leiam também:

Deixe seu comentário

10 comentários para esse post

  1. Jorge Paulo disse: 13.09.06 ás 07:33
    #1

    Muito legal seu artigo. Eu não conhecia ainda a utilização desses pseudo-elementos.
    Gostaria, se possível, de ver mais artigos sobre esse assunto.

  2. Rael B. Riolino disse: 13.09.06 ás 10:30
    #2

    Legal… até hoje nao tinha visto nenhum blog abordar esse assunto, que pode ser muito bem utilizado.

    Vale lembrar tb que é possível “enfeitá-lo” da maneira que quiser… ou seja, qualquer propriedade do CSS (ou pelomenos a maioria) pode ser aplicado nos pseudos-elementos, por exemplo: color, lin-height, size, position, text-decoration, font-style, etc…

    Faça um exemplo tb:

    #link1:after {
    content: "Exemplo de After";
    color:#00F;
    font-size:24px;
    background-color#EEE;
    }

    e desfrute do resultado…

    o melhor desta ferramenta:

    Ex.:

    Imagine uma lista de fotos com trumbnails, onde embaixo da foto fica escrito (clique para ver maior).
    No site existem mais de mil fotos, e dai chega o cliente e fala pra mudar a frase para (veja ampliado)… e ai?

    Com o :after é só mudar no css que todas as paginas serão alteradas! (como se fosse uma include)

  3. Rael B. Riolino disse: 13.09.06 ás 10:44
    #3

    só não sei dizer se essas frases geradas a partir do CSS são indexadas nos mecanismos de busca… ta ai uma duvida :-/

  4. Alexandre disse: 13.09.06 ás 11:14
    #4

    Uma mão na roda… inútil!
    Se o IE não vê, pelo menos 90% da audiência tupiniquim não vê.
    Alguém sabe se o IE7 vai ter suporte à :after e :before?
    Abs

  5. Carlos Eduardo disse: 13.09.06 ás 16:48
    #5

    Duvido que sejam indexadas, pois não fazem parte do conteúdo. Ou seja, se você tem a intenção de fazer algo que funcione realmente como conteúdo, não use.

    E como o Alexandre disse, acaba-se tornando algo sem muita utilidade, pois o IE não suporta, dificultando o uso dos pseudo-elementos.

    Mas para efeitos visuais que não façam muita diferença, não há problema, só acrescentam algo nos browsers “web standards” mas, se visto no IE, não perde muita coisa.

  6. Rael B. Riolino disse: 13.09.06 ás 17:24
    #6

    É…. pra variar o IE complicando nossa vida

  7. Nagueva » Blog Archive » Resolvendo problemas com altura de divs e floats disse: 22.08.07 ás 16:37
    #7

    [...] encontrei este link no Position Is Everything com uma solução para o problema. Ele utiliza o pseudo-elemento :after e hacks para os browsers que não o [...]

  8. COMO OCULTAR SEU EMAIL DOS SPAMBOTS SOMENTE COM CSS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards disse: 26.09.07 ás 06:02
    #8

    [...] achando uma técnica bem interessante de ocultar o e-mail somente com CSS, utilizando da pseudo-classe :after, que para nossa alegria, não funciona no IE. Para essa façanha, utilizaremos o [...]

  9. Nagüeva » Resolvendo problemas com altura de divs e floats disse: 26.01.08 ás 12:06
    #9

    [...] encontrei este link no Position Is Everything com uma solução para o problema. Ele utiliza o pseudo-elemento :after e hacks para os browsers que não o [...]

  10. Cristiano Francisco Leal da Silva disse: 01.02.08 ás 15:50
    #10

    Olá eu estou desenvolvendo uma nova versão para o meu site (http://www.jornalpontodevista.com.br) e eu quero colocar cantos arredondados mas na B… do IE não tem suporte. Como que eu vou fazer?
    Grato

Deixe seu comentário