Valores Aceitos
Primeiro, vamos dar uma olhada em todos os valores aceitos do content
propriedade.
normal
: Este é o valor padrão. Computa paranone
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 usandourl()
oulinear-gradient()
.open-quote
|close-quote
: Define o conteúdo para o caractere de citação apropriado referido noquotes
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 noquotes
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 umcounter
, 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:
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:
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.
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.