CSS - quotes

What is a quote?

CSS quotes property allows browser to render quotation marks for the content. The CSS quotes can be added to any element. They seek the benefit of pseudo-elements ::before and ::after to insert the quotation marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.

This CSS quotes specifies how the browser should render quotation marks that are added using the open-quote and close-quote values of the content property.

CSS Quotes Values

The quotes property can take one of the following values −

  • none: The open-quote and close-quote values of the content property produce no quotation marks.

  • string string,+: One or more pairs of string values for open-quote and close-quote. The first pair represents the outer level of quotation. The second pair is for the first nested level and next pair for next nested level and so on.

  • initial: Depends on user agent

  • auto: Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

CSS Quotes - Demo

Try to select different values for CSS quotes property and see the result in right box.

Quotation Mark Characters

Following table describes the various quotation mark characters:

Quotes Description Entity Number
" double quotes \0022
' single quote \0027
< single, left angle quote \2039
> single, right angle quote \203A
<< double, left angle quote \00AB
>> double, right angle quote \00BB
>> 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

CSS Quotes - None

The none value for the quotes property indicates that open-quote and close-quote values of the content property produce no quotation marks. Following example demonstartes this:

<html>
<head>
<style>
   p {
      quotes: none;
   }
   p:before {
      content: open-quote;
   }
   p:after {
      content: close-quote;
   }
</style>
</head>
<body>
   <p>Tutorialspoint CSS Quotes set to <i>none</i></p>
</body>
</html>

CSS Signle Quotes

Following example demonstartes specifies which quotation marks to use when string,string,+ value is used.

The first value specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, and so on

<html>
<head>
<style>
   #quote1 {
      quotes: '‘' '’';
   }
   #quote2 {
      quotes: '"' '"';
   }
   #quote3 {
      quotes: '<' '>';
   }
   #quote4 {
      quotes: '\2018' '\2019';
   }
</style>
</head>
<body>
   <p><q id="quote1">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote2">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote3">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote4">Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS Quotes Initial

Followig example demonstrates use of the quotes: initial; property value. This values sets default values to quotes.

<html>
<head>
<style>
   q {
      quotes: initial;
   }
</style>
</head>
<body>
   <p><q>Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS Auto Quotes

Sets the quotes property to the value auto that automatically determines the correct quotation marks based on the language - as demonstrated in the following example:

<html>
<head>
<style>
   q {
      quotes: auto;
   }
</style>
</head>
<body>
   <div lang="fr">
      <q>Tutorialpoint est un site de cours d'anglais.</q>
   </div>
   <hr />
   <div lang="ru">
      <q>Tutorialpoint — сайт курсов английского языка.</q>
   </div>
   <hr />
   <div lang="de">
      <q>Tutorialpoint is een Engelse cursuswebsite</q>
   </div>
   <hr />
   <div lang="en">
      <q>Tutorialpoint is an english course website.</q>
   </div>
</body>
</html>

CSS Quotes :lang pseudo-class

You can also use the :lang pseudo-class to define different styles for quotation marks based on the language attribute (lang) within the elements.

  • The :lang(en) rule defines styles for elements with the English language attribute.

  • The :lang(fr) rule defines styles for elements with the French language attribute.

Example

Let us see an example −

<html>
<head>
<style>
   :lang(en) {
     quotes: "#" "#" "<<" ">>";
   }
   :lang(fr) {
     quotes: '\2039' '\203A';
   }
</style>
</head>
<body>
   <p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p>
   <p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p>
</body>
</html>
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements