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