Почему двойные кавычки показаны только для первого элемента?

Мне интересно, почему браузер показывает двойные открытые кавычки только для первого элемента. Вместо этого второй элемент заключен в одинарные кавычки.

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

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Ваши открытые кавычки не прерываются, поэтому браузер делает «умное» предположение, что вы собираетесь вложить свои кавычки, что приводит к двойным внешним кавычкам для первого элемента и одинарным внутренним кавычкам для второго. Вот как знаки препинания работают во вложенных цитатах. См. Википедию и ссылки на вложенные цитаты в ней.

Примечательно, что границы элементов игнорируются, поэтому не имеет значения, даже если ваш второй элемент вложен глубже или оба элемента вложены в свои собственные родительские элементы, он все равно будет работать таким же образом, что делает его особенно полезным в абзацах, которые могут содержат различные виды и комбинацию элементов фразировки ( a, br, code, em, span, strong, и т.д., а также qсам по себе). Как вложены кавычки, зависит исключительно от количества open-quotes и close-quotes, которые были сгенерированы в любой момент времени, и алгоритм подробно описан в разделе 12.3.2 спецификации CSS2 , который заканчивается следующим примечанием:

Заметка. Глубина цитирования не зависит от вложенности исходного документа или структуры форматирования.

С этой целью есть два так называемых «решения» этой проблемы, оба из которых включают добавление ::afterпсевдоэлемента для уравновешивания первого набора открытых котировок.

Вставка закрывающих кавычек с использованием ::afterцитаты для первого элемента завершается до того, как встретится второй элемент, поэтому вложения цитат не происходит.

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

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

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Если вы на самом деле не хотите отображать закрытые кавычки, вы все равно можете запретить браузеру генерировать одинарные кавычки для второго элемента, используя no-close-quote.

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

a::after {
  content: no-close-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Это потому, что вы не закрыли предыдущие котировки, следующие котировки останутся только с одним '.

поэтому используйте псевдоэлемент afterсcontent: close-quote

См. Ниже фрагмент:

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

<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Вы также можете редактировать первичные и вторичные кавычки в теге, используя свойство CSS кавычек следующим образом:

a {
  quotes: "“" "”" "“" "”";
           ^   ^   ^   ^
           |   |   |   |
           |   |   |   |_ #secondary close quotes 
           |   |   |_____ #secondary open quotes 
           |   |_________ #primary close quotes    
           |_____________ #primary open quotes 
 }

см. ниже фрагмент:

a {
  quotes: "“" "”" "“" "”";
}

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

<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>