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

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

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

<a href="#" onclick="location.href='http://www.google.com'; return false;">Google</a> <br>
<a href="#" onclick="location.href='http://www.amazon.com'; return false;">Amazon</a>

Ответ 1

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

Примечательно, что границы элементов игнорируются, поэтому это не имеет значения, даже если ваш второй элемент вложен глубже или если оба элемента вложены в свои собственные родительские элементы, он все равно будет работать одинаково, что делает его особенно полезным в параграфах, которые могут содержат различные виды и комбинации элементов фраз (a, br, code, em, span, strong и т.д., а также q). Как вложенные кавычки зависят исключительно от числа open-quote и close-quote, которые были сгенерированы в любой момент времени, а алгоритм подробно описан в разделе 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>

Ответ 2

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

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

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

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

<a href="#" onclick="location.href='http://www.google.com'; return false;"> Google</a> <br>
<a href="#" onclick="location.href='http://www.amazon.com'; return false;">Amazon</a>  <br>
<a href="#" onclick="location.href='http://www.google.com'; return false;"> Google</a> <br>
<a href="#" onclick="location.href='http://www.amazon.com'; return false;">Amazon</a>