Ads by ProfitSence
Close

CSS quotes

Last Updated on Wednesday 5th Oct 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