Ads by ProfitSence

CSS quotes

Last Updated on Wednesday 5th Oct 2022

CSS Quote


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


					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.


					<q>Hello World</q>



					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 lang="es">
  <q>Hola mundo</q>
<div lang="de">
  <q>Hallo Welt</q>
<div lang="en">
  <q>Hello World</q>


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