CSS quotes Property

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

The pseudo-elements ::before and ::after are used to insert the content marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.

There are different types of quotation marks, the popular ones are the straight and the curly quotation marks.

Quotation marks depend on user agent.

Initial Value Not specified.
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS2
DOM Syntax Object.style.quotes = "'\2018' '\2019'";

Syntax

quotes: none | string | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .example {
      quotes: "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Quotes property example</h2>
    <p><q class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</q></p>
  </body>
</html>

Let’s see another example of the quotes property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
      quotes:  "\0022" "\0022" "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Quotes property example</h2>
    <p><q class="example">Lorem Ipsum is simply <q>dummy</q> text of the printing and typesetting industry.</q></p>
  </body>
</html>

Values

Value Description
none The "open-quote" and "close-quote" values of the content property do not produce quotation marks.
[<string> <string>]+ Specifies the quotation mark. The first is the opening mark the second is the closing mark. The first pair represents the outer level of quotation, the second pair is for the first nested level.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Quotation Mark Characters

Marks Description Entry 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




Related articles