Geração de conteúdo estático via CSS

Entenda como funciona a geração de conteúdo automática via CSS usando a propriedade content.

por Diego Eis 02/12/2013

A Propriedade content cria um conteúdo estático utilizando os pseudo-elementos ::after e ::before.

Só para esclarecer: o W3C determinou que pseudo-elementos usem sempre :: em vez de apenas dois pontos : que é para diferenciar das pseudo-classes. Por isso não fique intrigado caso os exemplos usarem ::.

Relembrando

No CSS existe a possibilidade de você inserir um elemento de mentira (pseudo-elemento) em objetos no HTML. Estes elementos pode te auxiliar em diversos momentos do desenvolvimento, prevenindo a criação de elementos HTML vazios para produzir algum detalhe do layout que possa se misturar com o conteúdo real.

Quem nunca teve que criar um span vazio no começo ou no final de um elemento para produzir uma seta, um background decorativo ou qualquer outro detalhe? Usar os pseudo-elementos funciona como um span vazio, só que melhor, por que não é gerado lixo no HTML.

Abaixo você vê alguns exemplos de como podemos melhorar a utilização dessa vantagem.

Valores da propriedade

A propriedade content pode ter os seguintes valores:

none, normal

O conteúdo não vai ser gerado.

Uma string de texto normal.

url()

Aqui ela te permite inserir imagens de fontes externas.

counter()

Aqui inserimos contadores.

attr(attribute)

Aqui permitimos pegar o valor de um determinado atributo do elemento.

open-quote, close-quote, no-open-quote, no-close-quote

Gera automaticamente marcações de aspas.

Lembrando que a propriedade content só pode ser usada nos pseudo-elementos ::after ou ::before.

String

Vamos gerar um texto simples no início ou no fim do elemento.

h1::before {
    content: "- ";
}

Esse traço não seria muito interessante se fosse colocado direto no HTML. Os leitores de tela o leriam, os sistemas de busca indexariam o título com o traço e etc… Ele não é um conteúdo que agrega informação, é puramente para organizar visualmente os títulos.

url()

Agora, imagine que você queira inserir uma imagem, como uma seta, nos ítens de uma lista, por exemplo.

counter()

Este é um dos meus prediletos. Você pode inserir contadores automáticos nos elementos. Imagine que você queira colocar no final de cada título o número do título. Como abaixo:

As propriedades usadas ali são as counter-increment e a counter().

Elas funcionam assim: coloquei a propriedade counter-increment com o valor numero-do-titulo. Esse valor é como se fosse uma variável em todos os elementos h1. Toda vez que o browser renderizar um H1, ele pegará essa variável (numero-do-titulo) que eu defini e incrementará o valor dela.

No pseudo-elemento :after de cada título, eu exibi o valor de contador daquela variável com o counter(numero-do-titulo).

Muito simples, hein?

Dá para fazer um post inteiro com essa propriedade, mostrando suas variações e propriedades que funcionam conjuntamente com ela.

attr(attribute)

Usando o valor attr(attribute) eu consigo exibir o valor de algum atributo do elemento nos pseudo-elementos ::before e ::after. Muito simples também. Suponha que você queira mostrar ao lado de cada link o endereço do próprio link. O resultado é este:

Formatando com CSS

O mais legal é que você pode formatar com CSS os elementos ::after e ::before como se fossem elementos do HTML, usando as propriedades normais que já usamos diariamente. Veja o exemplo acima com os endereços dos links formatados: