o content A propriedade em CSS define o conteúdo de um elemento. Você deve ter ouvido falar que esta propriedade se aplica apenas ao ::before e ::after pseudo-elementos. Neste artigo, exploraremos vários casos de uso para o content propriedade, inclusive fora dos pseudo-elementos.

Pré-requisito

Como a maioria dos casos de uso para o content propriedade envolve pseudo-elementos, sugiro que você esteja familiarizado com a forma como o ::before e ::after pseudoelementos funcionam. Aqui está um ótimo artigo para você se atualizar:

Valores Aceitos

Primeiro, vamos dar uma olhada em todos os valores aceitos do content propriedade.

  • normal: Este é o valor padrão. Computa para none quando usado com pseudo-elementos.
  • none: Um pseudoelemento não será gerado.
  • : Define o conteúdo para a sequência especificada. Essa sequência pode conter seqüências de escape Unicode. Por exemplo, o símbolo de direitos autorais: \000A9.
  • : Define o conteúdo para uma imagem ou gradiente usando url() ou linear-gradient().
  • open-quote | close-quote: Define o conteúdo para o caractere de citação apropriado referido no quotes propriedade.
  • no-open-quote | no-close-quote: Remove uma cotação do elemento selecionado, mas ainda aumenta ou diminui o nível de aninhamento referenciado no quotes propriedade.
  • attr(*attribute*): Define o conteúdo como o valor da sequência do atributo selecionado dos elementos selecionados.
  • counter(): Define o conteúdo como o valor de um counter, geralmente um número.

Corda

Um dos exemplos mais básicos seria o uso de adicionar corda conteúdo antes ou depois de um elemento. Neste exemplo, adicionaremos um símbolo de link antes de um link e adicionaremos o URL para o link depois dele.

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

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

Como alternativa, você pode adicionar padding ou margin aos pseudo-elementos para adicionar separação.

Citações básicas

Com o content Na propriedade, você pode adicionar aspas antes e / ou depois dos elementos. Agora, em HTML, temos o tag. Isso também adicionará aspas ao seu conteúdo. No entanto, com o content propriedade, podemos ter mais controle sobre a implementação.

Aqui está o exemplo mais básico de adição de aspas:

Você também pode fazer isso usando a tag HTML . Mas talvez desejemos estilizar a citação de maneira diferente. Então, vamos adicionar apenas a citação de abertura e não a citação final. E também vamos estilizar a citação 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:

Imagem mostrando uma única citação com estilo na parte superior esquerda do parágrafo

Cotações Avançadas

Também podemos especificar onde fazemos não quer aspas. Por exemplo, você pode estar citando alguém que está citando outra pessoa. Portanto, você teria aspas entre aspas, o que pode ser confuso para o leitor.

No código abaixo, estamos usando HTML tags, especificando quais tags não devem exibir as aspas.

À primeira vista, você pode pensar que devemos apenas remover o tag onde necessário. Porém, especificando onde uma cotação ainda não deve aumentar ou diminuir o nível de aninhamento referido no quotes propriedade.

Para explicar isso, precisamos entender o quotes propriedade. Isso é simplesmente uma “matriz” de caracteres que deve ser usada ao citar. Aqui está um exemplo:

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

Estes são conjuntos de citações. O primeiro conjunto será usado para o nível superior de cotações. O segundo conjunto será usado para a primeira cotação aninhada. E o terceiro conjunto será usado para a segunda cotação aninhada. E assim por diante, se houvesse mais conjuntos incluídos.

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

Para cada nível de cotação, podemos atribuir diferentes conjuntos de caracteres a serem usados ​​nas cotações. Especificando onde uma cotação ainda não deve ser incrementada ou diminuída o nível de aninhamento referido no quotes propriedade.

Dê uma olhada no exemplo abaixo. Você verá que o segundo nível de aspas foi pulado.

Atributos

Os atributos podem ser usados ​​para passar o conteúdo do HTML para o CSS content propriedade. Na verdade, já o usamos no exemplo do link em que usamos o href atributo para incluir a string do URL como parte do nosso conteúdo.

Um caso de uso perfeito para isso é uma dica de ferramenta. Você pode adicionar um title atributo a um elemento em HTML para ter uma dica de ferramenta integrada simples ao passar o mouse. Mas, para personalizar isso, podemos usar um atributo de dados em nossa tag HTML e, em seguida, usar o content propriedade para adicionar uma dica de ferramenta.

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

Contadores

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

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

Sem se aprofundar muito no counter função, primeiro precisamos iniciar o contador no ol elemento. Podemos nomear isso como quisermos. Então dizemos ao contador para incrementar em cada li elemento. E por último, definimos o content do li::after.

Aqui está o resultado:

Lista ordenada

Você pode usar isso para personalizar o conteúdo em cada item da lista que precisa de um número correspondente. Ou você pode usar isso para personalizar o próprio item da lista. Por exemplo, você pode remover a numeração padrão e implementar um sistema de numeração com estilo personalizado.

Imagens

Imagens e gradientes podem ser usados ​​com o content propriedade. Isso é bastante direto. Aqui está um exemplo que usa os dois:

Para acessibilidade, há também uma opção para adicionar texto alternativo à imagem. Este recurso não é totalmente suportado.

content: url(//unsplash.it/200/200) / "Alternative Text Here";

Nota: Isso não é suportado no Firefox, IE e Safari. Além disso, o gradiente não funciona no Firefox.

Fora dos pseudo-elementos

Está certo! Você pode usar o content propriedade fora dos pseudo-elementos ::before e ::after. Embora seu uso seja limitado e não seja totalmente compatível em todos os navegadores.

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

codeSTACKr

#replace {  content: url("");  width: 100%;}

Nota: A substituição não é suportada no IE.

Conclusão

Na maioria das vezes você verá content: "" encontrado no ::before e ::after pseudo-elementos. Mas o content A propriedade possui muitos aplicativos úteis.

O melhor uso na minha opinião é usá-lo para atualizar elementos em massa. Se você deseja adicionar um ícone antes de cada link no seu site, seria muito mais fácil adicioná-lo através do content propriedade do que adicioná-lo a todos os elementos no documento HTML.

Obrigado pela leitura!

Obrigado por ler este artigo. Felizmente, isso ajudou você a entender melhor como o content A propriedade funciona em CSS.

Jesse Hall (codeSTACKr)
Eu sou o Jesse do Texas. Confira meu outro conteúdo e deixe-me saber como posso ajudá-lo em sua jornada para se tornar um desenvolvedor da web.



Fonte