Artigo original: https://www.freecodecamp.org/news/css-before-and-after-how-to-use-the-content-property/

A propriedade content no CSS define o conteúdo de um elemento. Você já deve ter ouvido falar que essa propriedade se aplica somente aos pseudoelementos ::before e ::after. Neste artigo, exploraremos os diversos casos de uso para a propriedade content, incluindo casos para além dos pseudoelementos.

Pré-requisito

Como a maioria dos casos de uso da propriedade content envolve pseudoelementos, sugiro que você esteja familiarizado com o funcionamento dos pseudoelementos ::before e ::after. Abaixo, vemos um ótimo artigo para esclarecer algumas dúvidas:

Valores aceitos

Primeiro, vamos examinar todos os valores aceitos pela propriedade content.

  • normal: é o valor padrão. Ele registra como none quando usado com os pseudoelementos.
  • none: um pseudoelemento não será gerado.
  • <string>: define o conteúdo com a string especificada. A string pode conter sequências de escape do Unicode. Por exemplo, o símbolo para copyright: \\000A9.
  • <imagem>: define o conteúdo como sendo uma imagem ou gradiente usando url() ou linear-gradient().
  • open-quote | close-quote: define que o conteúdo receba o caractere adequado de aspa referido na propriedade quotes.
  • no-open-quote | no-close-quote: remove as aspas do elemento selecionado, mas ainda adiciona ou reduz o nível de aninhamento referido na propriedade quotes.
  • attr(*atributo*): define o conteúdo como o valor em string do atributo selecionado dos elementos selecionados.
  • counter(): define o conteúdo como o valor de um counter (em português, contador) – geralmente, um número.

String

Um dos exemplos mais básicos seria a adição de conteúdo em strings antes ou depois de um elemento. Neste exemplo, adicionaremos um símbolo de link antes de um link e adicionaremos o URL do link depois dele.

a::before {
	content: "\\1F517 ";
}
a::after {
	content: " (" attr(href) ")";
}

Observe o espaço após o caractere Unicode no pseudoelemento ::before e antes do primeiro parêntese no pseudoelemento ::after. Isso criará um espaço entre eles e o elemento pai.

Como alternativa, é possível adicionar um padding ou uma margin aos pseudoelementos para adicionar uma separação.

Aspas básicas

Com a propriedade content, é possível adicionar aspas antes e/ou após os elementos. Agora, no HTML, temos a tag <q>. Ela também adicionará aspas ao redor do conteúdo. Porém, com a propriedade content, temos mais controle sobre a implementação.

Vejamos um exemplo básico da adição de aspas:

Também é possível fazer isso usando a tag <q>. Talvez, no entanto, queiramos estilizar as aspas de um modo diferente. Vamos, então, adicionar apenas uma aspa de abertura, mas não uma aspa de fechamento. Vamos também estilizar a aspa de abertura.

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

O resultado será este:

quote2

Aspas avançadas

Também podemos especificar onde não queremos aspas. Por exemplo, você pode estar citando alguém que está citando outra pessoa. Assim, você teria aspas dentro de aspas, o que pode ficar confuso para o leitor.

No CodePen abaixo, estamos usando tags <q> do HTML e, em seguida, especificando quais tags não devem exibir as aspas.

À primeira vista, você pode pensar que devemos apenas remover a tag <q> quando necessário. Porém, especificar onde uma aspa não deve estar ainda aumenta ou diminui o nível de aninhamento referenciado a partir da propriedade quotes.

Para explicar isso, precisamos entender a propriedade quotes. Aqui temos um "array" de caracteres que pode ser usado ao colocar aspas. Veja um exemplo:

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

Estes são conjuntos de aspas. O primeiro conjunto será usado para o nível superior de aspas. O segundo conjunto será usado para a primeira aspa aninhada. O terceiro conjunto será usado para a segunda aspa aninhada e assim por diante, se houver mais conjuntos incluídos.

Agora que entendemos a propriedade quotes, posso explicar como funcionam as propriedades no-open-quote e no-close-quote.

Para cada nível de aspas, podemos atribuir diferentes conjuntos de caracteres para usar para como aspas.

Veja o exemplo abaixo. Você verá que o segundo nível de aspas é ignorado.

Atributos

Atributos podem ser usados para passar conteúdo do HTML para a propriedade content do CSS. De fato, já usamos isso no exemplo do link, onde usamos o atributo href para incluir a string do URL como parte de nosso conteúdo.

Um caso de uso perfeito para isso é uma dica (tooltip). Você pode adicionar um atributo title a um elemento em HTML para ter uma dica interna simples ao passar o mouse. Para personalizar isso, no entanto, podemos usar um atributo de dados em nossa tag do HTML e, em seguida, usar a propriedade content para adicionar a dica.

Neste exemplo, usamos o atributo data-tooltip do nosso elemento do HTML para passar o valor para a nossa dica. Para o ponteiro da dica, definimos o content como "", já que content é necessário para renderizar um pseudoelemento ::before ou ::after.

Contadores

A função counter() do CSS retorna uma string que representa o valor atual do contador nomeado. No exemplo a seguir, temos uma lista ordenada que adicionaremos conteúdo usando um counter.

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol {
  counter-reset: exampleCounter;
}
li {
  counter-increment: exampleCounter;
}
li::after {
  content: "[" counter(exampleCounter) "] == ["
               counter(exampleCounter, upper-roman) "]";
}

Sem entrar em mais detalhes com relação à função counter, primeiro, precisamos iniciar o contador no elemento ol. Podemos nomeá-lo como quisermos. Em seguida, informamos ao contador que aumente em 1 para cada elemento li. Por fim, definimos o content de li::after.

Este é o resultado:

counter

Você pode usar isso para personalizar o conteúdo dentro de cada item de lista que precise de um número correspondente. Também é possível personalizar o próprio item de lista. Por exemplo, você pode remover a numeração padrão e implementar um sistema de numeração personalizado.

Imagens

Imagens e gradientes podem ser usados com a propriedade content. Isso é bastante direto. Aqui temos um exemplo que usa os dois:

Para fins de acessibilidade, há uma opção para adicionar texto alternativo para imagens. Esse recurso, porém, ainda não tem suporte total.

content: url(//unsplash.it/200/200) / "Texto alternativo aqui";
Observação: até o momento em que o texto foi escrito, essa funcionalidade não tinha suporte no Firefox, IE e no Safari. Além disso, gradientes não funcionavam no Firefox.

Além dos pseudoelementos

Sim! Você pode usar a propriedade content fora dos pseudoelementos ::before e ::after. Porém, seu uso é limitado e não totalmente compatível com os navegadores.

O caso de uso mais compatível seria a substituição de um elemento.

<div id='replace'>
  codeSTACKr
</div>

#replace {
  content: url("<https://www.codestackr.com/logo_twoline_light.svg>");
  width: 100%;
}
Observação: substituir elementos não tem suporte do IE.

Conclusão

Na maioria das vezes, você verá content: "" junto dos pseudoelementos ::before e ::after. A propriedade content, no entanto, tem várias aplicações úteis.

O melhor uso, na minha opinião, é para a atualização em massa de elementos. Se quiser adicionar um ícone antes de cada link em seu site, será muito mais fácil adicioná-lo por meio da propriedade content do que adicioná-lo em cada elemento de um documento do HTML.

Obrigado pela leitura!

Obrigado por ler este artigo. Espero que ele tenha ajudado você a entender melhor como a propriedade content funciona no CSS.

footer-banner-1

Sou o Jesse, e venho do Texas. Confira mais conteúdo meu e me informe se ajudei você de algum modo em sua jornada para se tornar um desenvolvedor para a web.