Tutorial Avançado de CSS: Pseudo Elementos

20 07 2008

image

Pseudo elementos se ligam a seletores do mesmo jeito das pseudo classes, na forma seletor:pseudoelemento { propriedade: valor; }. Existem quatro pseudo elementos.

Primeira Letra e Primeira Linha

O pseudo elemento first-letter é aplicado à primeira letra de um elemento e first-line à primeira linha. Você pode, por exemplo, criar letras capitulares (drop caps) e parágrafos com a primeira linha em negrito dessa forma:

p:first-letter {
  font-size: 3em;
  float: left;
}

p:first-line {
  font-weight: bold;
}

Before e after

Os pseudo elementos before (antes) e after (depois) são usados em conjunto com a propriedade content pra colocar conteúdo de qualquer lado de um elemento sem tocar no HTML.

O valor da propriedade content pode ser open-quote (aspas de abertura), close-quote (aspas de fechamento), no-open-quote (sem aspas de abertura), no-close-quote (sem aspas de fechamento), qualquer texto delimitado por aspas duplas ou qualquer imagem usando url(nomedaimagem).

blockquote:before {
	content: open-quote;
}

blockquote:after {
	content: close-quote;
}

li:before {
	content: "POW: "
}

p:before {
	content: url(images/jam.jpg)
}

Soa maravilhoso, não é? Bem, assim como tantas outras coisas (-sigh-), a maioria dos usuários não vai ver os efeitos de before ou after porque o IE simplesmente não pode ser incomodado por eles. Preguiçoso preguiçoso preguiçoso.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

3 responses

20 07 2008
Tutorial Avançado de CSS: A propriedade Display « Codando

[…] é usado exclusivamente com os pseudo elementos :before e :after pra definir o display do valor da propriedade content. O display padrão para a […]

20 07 2008
Tutorial Avançado de HTML: Especificidade « Codando

[…] Página Anterior: Pseudo Elementos […]

20 07 2008
Tutorial Avançado de CSS - Layout da Página « Codando

[…] Pseudo Elementos – Para um exemplo de flutuação. […]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: