1 de setembro de 2007

Os 1000 usos da propriedade Content

A propriedade content (algo como "Conteúdo") é usada junto com os pseudos-elementos :before e :after para gerar conteúdo e posiciona-los antes ou depois (dependendo do pseudo-elemento) de um seletor CSS.



Essa propriedade tem 3 tipos de valores:


Texto


Insere textos (caracteres) no seletor. Para usar esse valor, devemos colocar o texto que queremos que apareça entre aspas duplas (" e ").
Exemplo:




a:after {
content: "Isso é um link"
}


Imagens


Insere imagens antes ou depois do seletor. Para usar esse valor, devemos colocar url() e o endereço da imagem entre os parênteses.
Exemplo:




a:after {
content: url(../imagens/link.gif);
}


Atributos dos seletores


Essa é a parte mais legal da propriedade content, e foi isso que me motivou a escrever esse artigo. Com a propriedade content, você pode inserir o valor dos atributos das suas tags html, e o mais importante é que tem bastante serventia.


Por exemplo, para inserir a língua do site que o link esta apontando (hreflang), basta usar esse código:




a[hreflang]:after {
content: "[" attr(hreflang) "] ";
}


Para inserir o endereço de um link (bom para versões de impressão), basta usar esse código:




a[href]:after {
content: "(" attr(href) ")";
}


Como puderam perceber, esse ultimo uso do content, é um pouco mais complicado. Temos que trabalhar com o atributo html e não com a tag, isso não é muito comum, por isso estranhamos no começo mas é só usar a sintaxe tag[atributo].



Na propriedade content usamos as aspas duplas apenas para texto (caracteres), o "[" e o "{" são para os atributos não ficarem "soltos". Você pode modificar essa parte tranquilamente, adicionando o caractere que você achar que vá ficar melhor (só não esqueça das aspas duplas).



A parte mais importante é o attr(nome_do_atributo). Nessa parte você adiciona qual valor você quer que apareça na pagina.



Nota: Segundo essa fonte, o Opera suporta a propriedade content em todos os seletores.



Mais exemplos:
QuirksMode - Before e After



Duvidas? Comente!


Tags:

2 comentários:

matheus disse...

Valeu pelo comentário no meu site.
Boa sorte com o seu.
Abraço!

Fabrício disse...

muito bom, obrigado...