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

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

a::before {
  content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
2 90
html css pseudo-element css-content

2 ответа:

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

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

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

С этой целью существует два так называемых" решения " этой проблемы, оба из которых включают добавление ::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>
137

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

так что используйте псевдо элемент 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>
34