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. Ademais, 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.