Работа с кавычками

Давайте вернёмся к установке значения content для ::before и ::after на что-то отличное от пустой строки, потому что из этого можно сделать много чего интересного.

Для content можно установить специальные значения open-quote и close-quote. Это позволит вставить открывающие и закрывающие кавычки, соответствующие текущему языку. Для подобного случая хорошо подходит стилизация <blockquote>.

HTML

<blockquote lang="en">
  Hello! I am a block quote in English. Check out 
  how the quotation marks are automatically added around me!
</blockquote>

<blockquote lang="fr">
  Salut ! Je suis une citation en français. Je ne connais 
  pas le français, alors j’ai demandé à quelqu’un sur 
  Twitter de le traduire !
</blockquote>

CSS

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

blockquote::before, blockquote::after {
  opacity: 0.25;
  padding: 0 10px;
  font-size: 3em;
}

blockquote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
  padding: 20px 10px;
  border-radius: 10px;
  background-color: #e5ddcb;
}

Теперь у нас есть автоматические стильные кавычки для <blockquote>.

See the Pen Stylish Blockquotes by Will Boyd (@lonekorean) on CodePen.

В отличие от <blockquote>, тег <q> (строчная цитата) по умолчанию отображает кавычки. Это вовсе не магия — так делает стандартная таблица стилей вашего браузера!

q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

Ещё одна интересная особенность open-quote и close-quote заключается в том, что они учитывают вложенность. Например, для английского языка, если у вас есть вложенные теги <q>, внешние будет использовать кавычки “ и ”, а внутренние — ‘ и ’.

Стилевое свойство quotes даёт вам прямой контроль над тем, что использовать для open-quote и close-quote.

q {
  quotes: '<' '>'; /* Все цитаты берутся в кавычки < и > */
}

q {
  quotes:
    '<' '>'      /* Внешние цитаты берутся в кавычки < и > */
    '<<' '>>'    /* Цитаты, вложенные на один уровень, берутся в кавычки << и >> */
    '<<<' '>>>'; /* Глубоко вложенные цитаты берутся в кавычки <<< и >>> */
}

Давайте завершим этот раздел демонстрацией свойства quotes в действии.

See the Pen Open/Close Quotation Marks by Will Boyd (@lonekorean) on CodePen.

Каждая цитата имеет одинаковую разметку.

<q>If you're fine with <q>unexplained phenomena</q> then go ahead.</q>

Но с разными значениями quotes.

.customized {
  quotes: '→' '←';
}

.customized-nested {
  quotes: '⟪' '⟫' '⟨' '⟩';
}

.emoji {
  quotes: '😀💬"' '"';
}

q::before, q::after {
  color: #ff003c;
}