Citações - CSS-Tricks | CSS Almanac 2025

A quotespropriedade em CSS permite que você especifique quais tipos de aspas são usados quando aspas são adicionadas por meio das regras content: open-quote;ou content: close-quote;. Veja como usá-lo:

q ( quotes: "“" "”" "‘" "’"; ) q::before ( content: open-quote; ) q::after ( content: close-quote; )

No exemplo acima, quatro valores são adicionados. Um conjunto de aspas inglesas duplas e um par de aspas inglesas simples. É um pouco confuso, pois cada citação é colocada entre aspas - mas essas são apenas aspas programáticas (podem ser duplas (“) ou simples (')) como em qualquer outro lugar no CSS. As aspas dentro são o que será usado na página.

Há quatro valores para a propriedade de conteúdo que se relacionam com o quotesimóvel: open-quote, close-quote, no-open-quote, e no-close-quote.

O primeiro par de cotações no valor são as cotações de abertura e fechamento. O segundo par são as cotações de abertura e fechamento de cotações aninhadas em um nível abaixo de outras cotações que também usam a quotespropriedade. Por exemplo, um elemento dentro de um elemento.

Alguns exemplos:

Aspas duplas na primeira aspas, aspas simples na segunda.

Uma citação com citações francesas.

Você pode colocar quantos pares de aspas quotesdesejar na propriedade. Mas você não precisa colocar mais de dois, porque para cada citação extra ele simplesmente repete os quotesvalores desde o início.

Os valores no-open-quotee no-close-quoteimpedem a exibição das cotações, mas continuam a aumentar a profundidade da cotação.

Mais Informações

Não use o elemento a menos que esteja citando alguém. Em todos os outros casos (ironia, sarcasmo ou qualquer outra coisa que você use aspas), simplesmente use as próprias aspas (como estes: “”).
Isso não é apenas para o elemento, pode ser
também ou qualquer outra coisa.
Citações e acentos