CSS quotes

Last Updated On Sunday 8th May 2022

CSS Quote

quotes

The quotes property sets the type of quotation marks for quotations.

Syntax

	quotes: none;
quotes: auto;

quotes: "«" "»";
	
  • none – Produce no quotation marks.
  • auto – Appropriate quote marks will be used (via the lang attribute)
  • [<string> <string>]+ – One or more Pairs.

Note First pair represents the outer level of quotation.Second pair is for the first nested levelNext pair for third level and so on.

HTML

	<q>Hello World</q>
	

CSS

	q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}
	

Auto quotes

  • For most browsers, the default value of quotes is auto.
	<div lang="fr">
  <q>Salut tout le monde</q>
</div>
<hr>
<div lang="es">
  <q>Hola mundo</q>
</div>
<hr>
<div lang="de">
  <q>Hallo Welt</q>
  </div>
<hr>
<div lang="en">
  <q>Hello World</q>
</div>
	

Quotation Mark Characters

Quote Description Entity Number
double quote \0022
single quote \0027
single, left angle quote \2039
single, right angle quote \203A
« double, left angle quote \00AB
» double, right angle quote \00BB
left quote (single high-6) \2018
right quote (single high-9) \2019
left quote (double high-6) \201C
right quote (double high-9) \201D
double quote (double low-9) \201E