Чому подвійні лапки відображаються лише для першого елемента?

Мені цікаво, чому браузер показує подвійні відкриті лапки лише для першого елемента. Натомість другий елемент має одинарні лапки.

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 quotes наступним чином:

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>