CSS свойство quotes

Свойствоquotes устанавливает вид кавычек для контента.

Псевдоэлементы ::before и ::after используются для вставки кавычек в начале и в конце цитат. Эти псевдоэлементы указываются свойством content.

Есть множество видов кавычек, но самый распространенный вид это прямые и угловые кавычки.

Кавычки зависят от пользовательского агента.
Значение по умолчанию Не указано
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Нет
Версия CSS2
DOM синтаксис Object.style.quotes = "'\2018' '\2019'";

Синтаксис

quotes: none | string | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example {
      quotes: "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства quotes</h2>
    <p><q class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне.</q></p>
  </body>
</html>

Давайте рассмотрим другой пример со свойством quotes:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example {
      quotes:  "\0022" "\0022" "\00AB" "\00BB";
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства quotes</h2>
    <p><q class="example">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне. </q></p>
  </body>
</html>

Значения

Значение Описание
none Значения "open-quote" и "close-quote" свойства content не добавляют кавычки.
[<string> <string>]+ Указывает, какие кавычки использовать. В начале указывается открывающая кавычка, а в конце - закрывающая. Первая пара значений представляет внешний уровень цитаты, а вторая пара используется для первого вложенного уровня.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Символы кавычек

Маркер Описание Номер записи
" двойная кавычка \0022
' одинарная кавычка \0027
одинарная, лево-угольная кавычка \2039
одинарная, право-угольная кавычка \203A
« двойная, лево-угольная кавычка \00AB
» двойная, право-угольная кавычка \00BB
` левая кавычка (одинарная сверху-6) \2018
՛ правая кавычка (одинарная сверху-9) \2019
левая кавычка (двойная сверху-6) \201C
правая кавычка (двойная сверху-9) \201D
двойная кавычка (двойная снизу-9) \201E

Поддержка браузера

chrome edge firefox safari opera
11.0+ 12.0+ 1.5+ 9.0+ 4.0+

Практикуйте свои знания

Что делает CSS свойство 'quotes'?
Считаете ли это полезным?