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