Boas utilidades para o uso do atributo 'content' do CSS
Poucas pessoas têm o conhecimento que o CSS pode inserir conteúdos em seu documento HTML utilizando o atributo content e os pseudos elementos :before, :after. Lembrando que ele deve ser usado apenas como complemento visual, e não como um outro meio de inserir conteúdo em seu documento.
Aqui estão 3 boas ultilidades para o uso do atributo content.
Protegendo seu email contra Spams
Um bom uso do atributo content é para proteger os emails contra spams, com ele você pode esconder do código fonte do HTML os emails que você deseja exibir, fazendo com que os bots não encontrem o email para o uso em spams. A maneira mais automatizada é fazer com que o atributo content insira depois do usuário do seu email o resto do email, pegando de algum atributo do HTML.
Exemplo:
CSS:
/* Inseri no fim do elemento span.email
o texto que está no atributo title */
span.email:after{
content: attr(title);
}HTML:
<span class="email" title="@seuemail.com">usuario</span>Resultado:
usuario@seuemail.comExibindo a url do link ao imprimir
Um outro bom uso do atributo content é para exibir a url do link na hora da impressão, assim resolvendo o problema de imprimir somente o texto do link.
/* Se existir o atributo href,
inseri ele na hora da impressão */
@media print {
a[href]:after { content:" (" attr(href) ") "; }
}Adicionando Aspas duplas na tag blockquote
Por padrão na maior parte dos browsers, a tag HTML blockquote que é usada para citações longas vem sem aspas duplas, com o atributo content você pode colocar elas de forma que seja cross browser e sem o uso de imagens.
Exemplo de uma citação longa com aspas duplas.
/* Aspas Duplas curvas cross browser */
blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }Os browsers mais utilizados (Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ e Internet Explorer 8+) suportam CSS content com o pseudo elemento :after, :before e está especificado como recomendação na W3C.